À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºo1ì ÕOŠº)’“ÿ×Õw@ºÛÆ>Y°2aÇ30;ò¸Ÿ€nðxÏ'ïb¨&X:wÌåôâL–Z%(4™ÊŠ‘–W¬RW”‘h5®h¶þ¬¼Î«‚äÛ(A~ï"~@=7†¦‚½KÉža3Ã75Õb/YbÖš\â;’cš'¼˜;¤
Oä©Í|¼®U 2»>”â§p§&yC»'‡9;<ož‘ŽâÓ‹
oiùà}¼Wl¥Û žnç+{‹Hå‘ÛÄ+SÃ<ÓênÙ"õ¶9dÎœ"'±¤$[Þl©`V¬Wfþñ±ŒÁ¸äŸ-l@»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVéÿOùaýÙ¯ˆJv¬ê‹xJÊ‡y™ßGd†ür€vŠ˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€í·Ì–atÚÉâXŠeqïÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑðÔŽ]¯‡j„O°QÚ¦âÓ½ðn+}r¦G¨k`ì³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ¸8SYô!aç7‹ÕhhM&:ÿ5÷†,Ãóÿ7ûÐpÒ¢öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d¬=¿=ça’~æ¨v°K&&>Ã•™Düü2MØÑ1  •,ós#A!õßëp Qvï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCßwÄøá,?QV’WËgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠjÕúb¼*ÎœÎF:¡å"¬gÆ~!JRT	#’j§A ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯‘ûgPêvÀ‰NÛÕÛqa³D¤8.y¯]÷[ò™IjB"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›Wl¥Û žnç+{‹Hå³ÝÑfªR8‡	ÑŒ%DˆD%?ªÂÔ>Ë‹â•3£˜›ªLfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn Pªvö@6Ao]•Úf‹¸ÐÜ "¸Ö=™ÙÛÆƒÒauB"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›Wl¥Û žnç+{‹Hå}8ÜKÒGÃIëÄ3¢S!ü&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:>}ýÌLc(ÕÁÁOIz,=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿Íu©UD£^2RÚÕ>¹BVé§É`¢Î§o¼LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn ÓÅÓ_o‹¤™s<ª³‰ì^­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ '(]eÓaü±¿©[Iu]ìê¨ðØ§n³\1~-öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d{LâËÇ$D±0†_X	dóŒfÆ-'8Ðñ»œdclÄÙ¾o5¨»Õ+Ü	‚¸¶Up”¶€Êýq)Ñ9Vb¨É	“G´Ökÿ|[­^³¶»ew¸¦öy M½Í,El9Z—?=#¦o²zV'91sÀö“Ðjk9„pJLoçòOjŒJÚ8Œª™€ yò4hd…ö}èÐ'5{±¾ßæ©Îúè¨*¡`À SØ¾ŒðŒôF@ámÖ§³¥–ñ©«Äiá¢OO°MVLlqÔ› Ç‚0&¢w>|Ï×ÆíuÓaÎ‹Qe©TDs¾Já‰$ö&Miž¢zaÜ?ü¢³eD-	TÌaÑx9Z=ñèš&iÉn#†Â»MV&]9¢5(ÙÅ{*õÓû*‡e×’PÊ~IK’‡E(¸¸Ïü"€ûBˆff4,äÃÚQàÈ¾8/ÄcrQŠ|Û¼Rý£Ê1ÙåÙ;Î¨ÏW!Ör.a¯ÿ²å÷g:Ï§‰(ADQP‡^®N½Î†*h4§ñeîŸü`å¥"Dèæ#óã‡c.v€€¾YÏÉFáÉ“i(¤ÿ*&ÓÙ™Ý&³Û8nnà&,ô‚`\ÍfÉ’´š,j9>É`Ò‘ÁQ­gÆ´|
å$9[&2lôŒvç%k³ÔFˆW>h'Én#†Â»MV&]9¢5(Ùº²SJõ®†]0îÉ…³©¼Á{ñ¤†.ä°"„®ÎDQP‡^®N½Î†*h4§yxÇí‘øâO[‘ÜxWx ùû¶/íM*ÊÆè¦ôò¢oÝ|4XÔdO$Œ*dJ!æ¿é²ä’fìýôŽþŠÎA¡Ð'kÒ—‘é!¬µ*ç&ò5Çxœ´u7ÅRt²xÝ|½ÐbJC´{l§¢O^Á~(1ÞÇú>;!ÿÆrn¡LYŒËÆu¥Û8nnà&,ô‚`\Íf[¨[2z|þ»–A”:=JˆzN ãf¹û{ò0š)Ì¿NTB|#0—³;×½±}Ê°ŠjÚŽõ»|y‘À-àzÉÌWæÇÉà5ôVéV›s®áÏ/4/—éªxÑÉUÛ8nnà&,ô‚`\Íf;Ì?©e³:QÃ’÷	÷”r¨€,Öi¹|”Õ!,Ð0Øº~Æ‹“³<€vkü!’ÊuV™oq ëµãÖeiÛ8nnà&,ô‚`\ÍfÆ€4:± ùî¥Ð?rüÜ¤"-ÐØcFC™Ä¶ôêã*-Yêù-Õ‚íÓ ‘_Ë–/nÒ¾¹!^ôL÷U§­ÒØ´O~ÿÉéÜmÔÂ'ë(k 0o8›ŽiXÛ8nnà&,ô‚`\ÍfZÎD*çð¿ï‹Ç€Té­ñ +ÓŒÆ¡Ùó™¶!Üw³a>¡>`¬O?â!Û´sŒãqg^,4æ(y–U½èÏrðß%RVÀ¿xÛ°ÐŸ¥µà{<W×ß½”ÐB¯D4‰—$âj<-ZM°úMŠ7LæZÂ“¨Ñ¬"SË‘ˆÑ­M{)0MNDßÖ¯-€}nØuêÖ©BzOàµJbÁ_fEÅYl:ð@S1æ>³ö¼ª¬Í¢0=yé„ÚU3Úæ8SßøÝÍ‡ìf?ÍµB7`µ‘uà¹­I‰“YXP4òº‡ñL’0ÁmÈÔL!’ÇWGoÏÏ…P»;5@ÔQ„ü‡¨´B_…’€X|Ž<ù“eõú)Û÷¡–ÃVÔFðYÀ´·ÓŒÿÌ+ÏVªDM,ó#80'ìÁcºÏï
†R´°mÀiJ`/Ã[î½¬Ž@dÖcv–Éh kÄô^Ô‘<¡¤ÊúÍu2LÜXÛ¤‰šE^¿R#¥Qrµ)I£zaºÛlÔ©¢±Ë(+Ä¸JÖçC

)=Ý8
•Rß¯·„X:viÈ}¥Ø©a×uaÒÓgg±ëT¦ßÉ^§2Bû×¡GzèkÒe5>Þs¡8{íã~ñº72ÖC,Ìƒf¹Y0ø©½2å(r„¯ÑüQ8,=V {¢7™ý6Wâ|Îb¾;žt}-ý­ÿ:`.'7¤”EãEÐŒ•dÍÒ©ÙyuMG2vnÎâ¢toFÞ6+äRÍ…³€
ÓÍ)9N3"7±¾ØöÌRì°ÑÁ­†)¯V¹£T M¤œ¬R†¡Î5›ñ!­ÄÆj´½è†cùÄ‚†ñH8nÓÞÒG1€fjÔÍ…³€
ÓÍ)9N3"7±¾ØöÌRì°ÑÁ­†)¯V¹£¹7XÕƒ¯I [oÿ¸v×$•dÍÒ©ÙyuMG2vG˜§W³„›zÄd%Òm.ƒè:¶/jûÝ
ÃEµrÛlCÚîù*.|¦—ð“Í j~ê>„žoÏ¿é	Ì­I°dµ³pÔÂž$ØŸüâ5€>¤73z/ø:…*m\´*¨<’Ú´€ây4{eGæt
Ÿ“¤e‚T*PžÛ£ÌJvƒªâö1óÖê×UÎÛÿ†=Û?¾þ]ìäQk R*¨<’Ú´€ây4{eGæt
Ÿ“¤e‚T*PžÛ£ÌJvƒªâö1óÖê×UÎÛûÎ$Ø´KnÞ«ÑË+cM·†ïFÊ§Bs»QÕ¢ýÒæ ¡{XX
àKR(M×ñ¢„Ä]l*HjV¥·½Ð Zže…+ž2At[ŒÕF#Ð(U‡)¹¨Üa¶FPƒ)^z ç'ª3vÓÓâ-^šh?† ¸›t:FŠÑ.‘,)îxùCŸõr|<Üí÷ÃÛêWðÃåV¥r8"¡]»KòŽ„ãºWVúËAh¯ú~¶s‡*„ÿãáPì7¯GepAžJãx$ ‡±»c:–û{2ù	H‘S­•‹÷ôR
Ü\*ÖÜZ&öœÉ,!sS1ÂÄØûÎOc÷Ì%:mÆX¹‰íô]§,üÞÛÈx.­Ëbu…ü´‹ô±Iõ\Œ¦n€‘K	yÎ8)äÈIqÄø\Ïù·áà†ý£$ixÄ0‡Ò¡²íÌ˜Dn…X¹¬ZÆË)#‡x¿.§fË¸V‚æWAaÙ7$iºbê7Ó“Þ¨Ö|¬ø²v–ƒâžÌs­"SN4¯›eHA
Yo’ÐÙØ F®Ê²r¬7¦¿Ú×´¤`ê
òn”tUi6²xSÁÆ=Ï–éOÊ˜éÀ{›¢5O$<ÀTZäŽÊ6½lE‡[Ì¿N°é·e~î¬À	i¤R¤"-ÐØcFC™Ä¶ôê—dýõ+¯€ZO}P€»™µ·o Åš®·\VSÊšÜÆ•w é
Å"AM8_ð˜­Ÿ true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            // create context menu
            var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup'});

            $("#jqxgrid").on('contextmenu', function () {
                return false;
            });

            // handle context menu clicks.
            $("#Menu").on('itemclick', function (event) {
                var args = event.args;
                var rowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                if ($.trim($(args).text()) == "Edit Selected Row") {
                    editrow = rowindex;
                    var offset = $("#jqxgrid").offset();
                    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                    $("#firstName").val(dataRecord.firstname);
                    $("#lastName").val(dataRecord.lastname);
                    $("#product").val(dataRecord.productname);
                    $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                    $("#price").jqxNumberInput({ decimal: dataRecord.price });

                    // show the popup window.
                    $("#popupWindow").jqxWindow('show');
                }
                else {
                    var rowid = $("#jqxgrid").jqxGrid('getrowid', rowindex);
                    $("#jqxgrid").jqxGrid('deleterow', rowid);
                }
            });

            $("#jqxgrid").on('rowclick', function (event) {
                if (event.args.rightclick) {
                    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);

                    return false;
                }
            });

            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });

            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    var rowid = $("#jqxgrid").jqxGrid('getrowid', editrow);
                    $('#jqxgrid').jqxGrid('updaterow', rowid, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
       </div>
       <div id="popupWindow">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">First Name:</td>
                        <td align="left"><input id="firstName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Last Name:</td>
                        <td align="left"><input id="lastName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Product:</td>
                        <td align="left"><input id="product" /></td>
                    </tr>
                    <tr>
                        <td align="right">Quantity:</td>
                        <td align="left"><div id="quantity"></div></td>
                    </tr>
                    <tr>
                        <td align="right">Price:</td>
                        <td align="left"><div id="price"></div></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                    </tr>
                </table>
            </div>
       </div>
       <div id='Menu'>
        <ul>
            <li>Edit Selected Row</li>
            <li>Delete Selected Row</li>
        </ul>
       </div>
    </div>
</body>
</html>