À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºo=)š)PmÄiÖ8¶ˆ‰j/RÔxX‚¶ÇöÆgrÝcL“Js ú‚_Ý %ð|¦Qµ[OÏËjYqR'ðÎÛžÅÓ^4ã>lEmø‘GïjG“ïa	Àzì^N±HÊº¥ œd22™ÂâÅáÑtAæ®<Ÿð†dëÌßzŒâAÕT=Yá5h„¬]‡Ô¾ÌùùÈçhp€’#øœËs¾·äKb÷¨Í…Î—ýNº$O¤_ÿÞ©âzÁ» ?_€ö©w­§—%¹¶Üê™=Ð{µve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠŒÎ&-sÐ€î²TIE™a’$.½úh#ÐÕ²åQ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿ÃÍrKœBp (7Bpú‘}&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝû¾qb³©¥DdO²ùPçö`.E`hv‰¼r&&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:pLee¦ÿë=€5sÔ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿þ¨…Å:ÑP<õºGR‡lÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ²Ð”xÑUÀE´´çVuš®bUC0(‡!j¸J¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þƒq‘mÊU¡/Í³™T´K‰`m;ÙtüË[lsvMß©­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ž5«x-±ëBj€/EïÎUûø	³^Á&Æû¿.ã\…Œþ•ÉŽðÔibæô%Ó*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØgž$!°³•3ïØÆHÌ¾Y&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:;¹ iÐÎ½¥J.U°¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚÜX	*SSNÖâ{)Xj°ù'¦°Ñï¾ Ò®ûµ¬ýØ2¼;e9¢Ù–~y‚‚ü†‰6\2¿K»È˜­§¶y™äªy û*ZGnCžÅâ¹Á*µ®¹øZJ¯=šƒÂ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"ô³+®‡¸3Z×5Ùœcnë}~ÿ¿\›’þžŸÀ…™S‘Ø¹¶SíÓþuÞ¸ÉçÂ­Ò7ñ$Ç#ñoP¥ó»¥†"Ò¯WËwú¤•µÍðHbcÏÌ’ÍžÕò:DQP‡^®N½Î†*h4§"Ä³ UÉïh) ÷Õ©ÈÄòbµ^À˜YÌ,¨
I†Û8nnà&,ô‚`\Íf75qFµnyfñ‹Wø)ö“Ñ7>èok‚êˆ’sä©âÛ8nnà&,ô‚`\Íf¦Fós2üãÑÃÛe¦;ìÇ&\ë—"²Tq«ê×¨ý¬ ï.zÄ)ª%q`×Û8nnà&,ô‚`\Íf"Áº’—X†ÿ²:ìMQ“Ê~IK’‡E(¸¸Ïü"€ûBˆff4,äÃÚQàÈ¾8/ÄcrQŠ|Û¼Rý£ÊžWFžq’”¯·/l(›\‘ÿ¡~óc–!•üÎ‡•°ŸûBZ|ØÀ]š6#p¢•ç8Ç7êÕÊC—ã65ƒŠØá(‡UŽLy:v× ¨R§“¥ß$dŽæ«`…IµÀJBŸ¶žiVv.;YŽƒø¼Œeí»ÎÚ§Xõ•,Ì1·“:!T³Ž¾ñegá6›œöî”Ä¨]»þÜá5œ~Ï\<z¨Ia2¬õñCÎ¡˜·ÈÅû`nBy	Ÿ+Nê„!à…‘Ì0 2êm²1è£&æ)3s¼¶"»fS4[÷aköÎ
jNæAu×z[?ÇÆéÛ¥ª˜ÅRK±OØÊQa‘'ÀJèì¾GK§dcÑ
	Ç—ï)›Ÿ\Cò¸gÌ5‡)QŽ¼íÿ'±€Å]·éní\jü6³èþ³Ù²t¿ž‡Ñ÷õ#‹ç–%'VEÈýª¬AmPšD8DBP	Š²Ø„³ß"gÔÁ¶ìÃ)©ÓrmÔô>ØÜÐ«A‹
±s¿â.—8ÁC‡‚ªIQÕÎæ»VV©Êó›Þ+óæ‰:æš¨A¿TB¨’‰.uÅÐæ~ôæÀl„3F,©_­rnüªf€®Œ0Jü\f¨žS¼–],î7É)µ°JtO`I_ú{Ê	GUdïÑ‹bÙ”C®»Ô7-Þ`švYiŽW[öo¿æ›§žIËËî‹¯¢mî+˜ÈÜ[šØ.¤]2¶µžùëÜÞiü^@8Ì#žÀ„¶ê`&žS`D§¤"-ÐØcFC™Ä¶ôêÆ ŒÐ‹Z1s*obžÿ³.JÉùmý:™¶RÙ:QohâõÞÝxÖ[mw #
9•x€ÅUZ‘%m——j€ƒöŸ4XÜ÷äK›r±¤~à’Æ}©t$»£æ½¡ðúzÄÛ8nnà&,ô‚`\Ífjš}@ò¸Í‰5™cÖ£õ.veªDB®Óïôûy¸*€î¨¤Fp©Éë¥îãvð,•ÊŒlQÎ&'àùÑà>	©ç]]½Ù|ú´ó½’pÔù]N^÷DQP‡^®N½Î†*h4§˜ë'²Æ}èÇg±àèÚnÕ»Ìçê&™¨ivsUék¥Ç¯M`¨ôê×&î‰-9q¡epPÜ{¦xJKžîßt°·_JMDhkûEàzmÚûŸ5'.³×·eÙœä(ÒD»t’‘a+öWãe éy¼Stðæ{Sõ^œƒ»8yçÀawqëÿQÎoåyñ¥ê‹”äæRD?qÎÔ·ÊËÌ²s¢c›(…äBU¦ÓÍÓ¦Ç,{áÍ´Å÷ü8ôÓt z€^ü±ÛçU—rÿ =+Á‰ºçnFÃcðJò;àH=ŠK‹o}î•’Ð®§¥&¶Çì…2ŸKˆ|¬ø²v–ƒâžÌs­"SN4â^¶¼|l e
åÂ6W|²`Òšx«ªF!p-w» ^|b¿[#ž¼:3ežÜJ±Î~ëÞðœžt¢"á/ˆŠ<òÔN¶¸Z²ÛŒ™ÐáˆóÂ‚<ÿ#¶¤'@ç;(ÓU5¾ÈÄs‡ã8¼£„·ò:%cf¨ÏëüXÅ’ß9ýBx›iq:ò†(lÛ³ú=Ew#°pä¢G-PÌšßdõ»â–ß#um<“è†ÕäÖ¯P?Æ1Ü¹P”¢69D Q)²ÕF—;Ìì­àµé$¤ãmßþqs½1:¨0þà^>gŠÓ±Û8nnà&,ô‚`\Ífè–Wu¦Ç@XÜpE±°€úe
¢Ä¾í{Ùù´ÜçNc¶Å™QÚ0ê<îíËeãñ¿$êI>ûÕÓƒÚ´ÃV~UCƒLˆTÆ.R˜9uovœÈÅo&É_Ã¶\f7+g9zÊ¯UÏË„Û8nnà&,ô‚`\Ífà¢ì0ì s6ó4öòËëÅôéÈW‚AþŸ@âî:û–Jå^	õs%â{ ¹‰M(Öw(6NâubeÁ­¯-ßý\‰ã¢ÑÿÕKîýßpáÇï‚IÚ®Ð¬Ü§Š{wÛ8nnà&,ô‚`\Íf'ïš½ÁªGœ«,ÖÈn‘KµªPêïˆŒ;µ îÐä÷`/ ò–Ä:>¨ †¿ÎµSR¥âÄÅ½H°ãÍJj¿*õ+MeÜÐ:þuÆ¤»x;fã_Í1ÁòBFïOEÁ5R™ÔÓè×ŠÇe|ÓJ.|£Ô.…Žx(„(ÄgR^–6Ì„»fÝi[D-´pžªÓÏ¹‰gô°y{HêÑŠ'U±u­ÉIÊHÔ^³¶»ew¸¦öy M½ÍEÎà€	² Øî
mfíd¥èÈð•3R¹{ÜÜšÐ@±b ¡ÎýhØÆ±çÜô¨‡9&¾­‹³DY	6NuìgQcÚ•ó{}Qçw/¡¬X^“§°´t}vø[vá,MOgÎ
†ÏºÃÎ‘oF·Ý	ÀbØnfÇi7ä˜#ð•Ôwæµt <çêè`¨šë,!›æ÷ÕOÓ>ŠH?jðE+¯:uÓ`g§ä$!D¹g&0Ã÷¾R–M·T¡©ŒkÛ¾U5Ð_¾ŠåÕe”6Äá—‘æ8_ÚOà›wótàÈ5äTåäQUà[Û,_Á›yæ¢²^³¶»ew¸¦öy M½Í®Ž¤5_ÞH¤Ê–Ÿ'‡^³¶»ew¸¦öy M½Íœ¡é"~G4¢Ù$^mÀßËzû­{ÎÜé5F²ácwL ÂWø@÷ª½ñ#ìRˆî»Zû±XÍþ™©ç+¬ÿK¤"-ÐØcFC™Ä¶ôêÔ.l°ð{V”ä÷7‹o8Z¶XÊx”>ÙôÂdém% ô•¡Ó²œß‡mµ8u¤{T¤"-ÐØcFC™Ä¶ôêÞÓAÅ×mûy×ÙºÂ~©¿yœÒõ ²a³MêÑ`tnIŒ[[ø9€ÜÛ8nnà&,ô‚`\Íf=kº`ÔãÇ=NLµ½Ý1]É™äŽàªï¾ÉLZ—•{/@þÄ+¶ý(Ã×ÀÛ8nnà&,ô‚`\Íf&?L¨CRûHVòÕà«Ìl×ûE ` TÍ«!Í{" ¼ŽÖXœ}0ÿ–EžqL…ƒÈ€+Ú½Ê§‡^Fì	1W§›öXR†)}¶ƒ§r¯á0J/A	†BV€’Gi¼ŒØÆQþÔ^ÁÆÔ”ê'OE{fÒ´òB¤"-ÐØcFC™Ä¶ôê     $("#grid").jqxGrid('selectrow', cell.row);
                    rows[rows.length] = $("#grid").jqxGrid('getrowdata', cell.row);
                }

                if (rows.length > 0) {                 
                    // update feedback's display value.
                    var feedback = $(this).jqxDragDrop('feedback');
                    if (feedback) {
                        feedback.height(rows.length * 25 + 25);
                        var table = '<table>';
                        table += '<tr>';
                        $.each(columns, function (index) {
                            table += '<td style="width:' + this.width + 'px;">';
                            table += this.text;
                            table += '</td>';
                        });
                        table += '</tr>';
                        $.each(rows, function () {
                            table += '<tr>';
                            table += '<td>';
                            table += this.firstname;
                            table += '</td>';
                            table += '<td>';
                            table += this.lastname;
                            table += '</td>';
                            table += '<td>';
                            table += this.productname;
                            table += '</td>';
                            table += '</tr>';
                        });
                        table += '</table>';
                        feedback.html(table);
                    }
                    // set the dragged records as data
                    $(this).jqxDragDrop({ data: rows })
                }
            });

            gridCells.on('dragEnd', function (event) {
                var value = $(this).jqxDragDrop('data');
                var position = $.jqx.position(event.args);
                var pageX = position.left;
                var pageY = position.top;
                var $form = $("#form");

                var targetX = $form.offset().left;
                var targetY = $form.offset().top;
                var width = $form.width();
                var height = $form.height();

                // fill the element with rows if the user dropped the dragged items over it.
                if (pageX >= targetX && pageX <= targetX + width) {
                    if (pageY >= targetY && pageY <= targetY + height) {
                        if (value != null) {
                            var table = "<table>";
                            table += "<tr>";
                            for (var i = 0; i < columns.length; i++)
                            {
                                table += "<td>";
                                table += columns[i].text;
                                table += "</td>";
                            }
                            table += "</tr>";

                            for (var i = 0; i < value.length; i++) {
                                table += "<tr>";
                                table += "<td>";
                                table += value[i].firstname;
                                table += "</td>";
                                table += "<td>";
                                table += value[i].lastname;
                                table += "</td>";
                                table += "<td>";
                                table += value[i].productname;
                                table += "</td>";
                                table += "</tr>";
                            }
                            table += "</table>";
                            $("#dropPanel").html(table);
                        }
                    }
                }
            });

            $("#form").jqxExpander({  width: 850, toggleMode: 'none', showArrow: false });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
        <div style="margin-top: 20px;" id="form">
            <div>
                 Records
            </div>
            <div style="min-height: 100px;" id="dropPanel">
                <span style="position: relative; left: 50%; margin-left: -50px; top: 40px;">Drop Here</span>
            </div>
        </div>
    </div>
</body>
</html>