À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºo=)š)PmÄiÖ8¶ˆ]¥’à)+ûì°D¬|’:ÉÚ‚"âÇ/,ugà\{Æ±ç}mÝ'÷¼«>¼k¨q	Eï~}wÕÞ>N·+JyúXfÌÏ€V3b|å0ÅïÈ¹ýÞ¨æ}£¾=ØðüVMà.¾HIt`Šê|—}WPéììíûº¦UøÜ8Xœ’9S	žý»§ÓõÞËˆD+UÔG6éG1¤VŠÝƒ"6÷²úhä4âÔ¹Å‚;"ç2Á€@rðÝÔByîÌÇ;l” >¯Y†#Íì_ÝÃÌ‡)ÈØëº!œ¢¸Ü°CÀƒ liu²‰|ìófÓLˆ0òØG+ ˜éò>.$³’õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…Ô_`w¯Ð%Á@Ø×Ll9W:#.ìóKö‹ÃÕ6& ÛgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠ&‘ä+©·õ†Œ13Û	ÑýVÌ‚ÌPƒÜI3Mà~ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯zËVW"Ü³Cû$–‡Œ°¥F‹¾Ý\ÎëÞûdAÁ9k«–g¡iÏE´_ò8“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯…ãÈò³õZ9ê…kõŸy§ªça:hÇ§ä*ÛWÔï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCßÁ*^'w„j
m´±jê&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:âµ_ŠÜ”Ð+¹Üû5œqB"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›Wl¥Û žnç+{‹Hå7.€Wùö<ö(|e)Á†Î=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿úÓ¡ê(ÖúLÒÅ×oW¾ã­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ž5«x-±ëBj€/EïÎ-:s&3J ÌU¼8³!û’TŸ×00½Äx~OÌ_Ð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ÛÕÛqaB~ßÚ7d§})6žèÙ­"|Ö˜‹ô³¨ƒ%#Æ5œõXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…ã·n‰x7¦fW³9=B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉÿTŽP˜(élT”˜ð%N×5ƒ‹S¹µ¼ÁÑ]Þ_ŒÈœÌ	y3ñ²k:Â6Œ1ú)¿W54Úfué˜°‘)™ñb¹ôæ¿ùœHa“G
z@Z-Í¬ÏFŠÍ=ÀDsø­DÁY5]ëí•
ïw`ãê\Ì¹$Gv!êAÄÒBõW öÊ<ò¹.3Lq3¹”ƒLœ…DQP‡^®N½Î†*h4§{7ˆ”dmœK9!÷È”³Ê‡ËyÊ½atÆ[JÈÅ^ÑŠ0Y¥‡jÝÿÃ-¤|«9¼Òì¢fŽóH,âæÜx_ÇŒÇuKO`/t·¹þö4âg0>’—¾N•ôY@¿õgàÌ	áýQ®ìú ø,&I?Õu¬É:$óÆ¾õâ†“­‹ôÉBªKÙJÛÃçü?i Xá9ØzPn \¢¶¹Z[AÕ,pIjüc•Èp÷éWkà•9Ð{ÿ™0êïˆ¸Î"Í„o´\§on³7 ¹å—ržâ§Ðˆ–¨cê4ùGMÏ\è#Ú»õòØÍ{'è¥Ê®Ó":ôxcïªÖ74ãƒäšÏKÃoêz—Øì1œ†Ø°áàJ»šëÂ—H(îuÄ:W/˜'l·¬´¡n¨]jéáÎ¼‹ìýÚ±É£Þ‘ «×Ò	tn£VY·4•m?w'mŽqý­ÍÔþD:¸p±wbÇ±"Ó¸i“PªƒXÔ90Ð'·Ýç”’É‡qWâ,±áSÚ¬ªKtë|“§Ìüªbº§¦ÀîåQ²KZfý÷Èº“O….+ ƒ³¹W Ê‡¶-O'Ž Þä‡«3€°Írß?±Rˆ}‚ýorrw£ïTÔÍMdÍ\Û8nnà&,ô‚`\Íf)]lQ™›fŸyî˜Ñak%(³`ðÇys@ç5ŠÍ´¹¾„ˆH| \çÞçTçwŽ~n³ŠRÛ„¢Îmø›¶ ˆõ<Ü›—e*@ïvôp«fsî6«™#Ù‹aFò:zÅ)YÆÌ`ÿs‹€°Ö7*éò/Û'%CJÊ¥¤,ŸË˜µÎÒq³þž˜pk}ºîóé	ùÕw<ûX¯òN¢1Û;øÇ:néªî1ªä—ÂÿÁ¢£¯È6U+¸5ÌjÑ·D0B¹"˜ÄÆ<¯BÆÂ„úÔâ"¿žDN‡ù¾¬Æ­.ÂN>v´2wá×ð#®—f#à%Ëê«+þ¦‡rrw£ïTÔÍMdÍ\Û8nnà&,ô‚`\ÍfKˆ„$opNÔí75þõ„[÷àZ¤)üÑløù|ò¹Š[û¨u'¬ãtS1`+YûzzÖ”'o°ŽJöIÕF…¬Ž1€Ü¬òD×·qE‚V<…Eçm™÷QJ´÷zÏEÓºQÜ=4V(c
‰v}°PñN*yŠT·/»Bú7ojë´<^`Ði(Cò³_ÂQ†’1B\/ :îº«„ì+éŽlƒGŒÐ0¯{yVpÖ‰¾LåÂ,›
Q=É‘×«øð‚¹sœçÎùêÙà"ÿçŠÁ=!W¡ÇÙ†,ø uUß«®«iÖ,6KS_i‡^õªÛwx:­k³Š+~Hø>H×ŠDïp•¢gŽìëÄí"ãž€`û"ØàÆîå„?^MYOÑ#ßçúlt,EAå¹î\Èz·¿ÚFîêÚh'é²ÍÍu ^–6Ì„»fÝi[D-´cÇSÃmÚÌÞp÷Ì±±\C»%hu¥ÿ e²¨…§œ>¹ò˜2Ô¿%¼{Óï¹ùvëí•
ïw`ãê\Ì¹$ö}¦.ã[~ðÆ§|{Ó=¶4d¡º¸ÏÁýBq@Å­e,“êgSUÍÚ>&TÃ†^Âßséó8Áx2z«ðÂëi¨¢Í	cn…ç¿©IØ!îæƒŸ±“>>ÓE¤ AQnõÒêh%¶.VmßÛk¨>t1{ÌTãÛÃ¿vë„½UëùÐ0D¨%™WY¹u$ G È!–äf(oÍyN6ëÛ8nnà&,ô‚`\ÍfÂì‘zmêCyŸïì—+b`rG¿½ñ{S7òÅV"ÇÚ’3EµB•a]B]‹âDÎDQP‡^®N½Î†*h4§A–ÿ£Ñ’ÁÓvtëK«Eÿ~§àËª6Öúû`z×	àHnÎù^¼¡§ö¤ÅÙ™Pi$êQþ(²p‚Vlå™›{J&‘óYÜx¤'RÏåcÈ=ºTù®ïÌ²àß²fÐ`J{åsö¦dWo;ŸŽžâ2j‚t0œ\mªq9ËnÉšÈñ;V`§W7z‚Y+õ¤u]ËBž_WH_‘&­O§³=–»‚ á¾l7W µaCŒß‹WeÏï£d.l%ÛÙ~[Nîmrvmô~Í>ÞåDQP‡^®N½Î†*h4§“Ãü'‘)ær“£¦ø§×ü™=V64wp;Ô‰¡J­„<"óhø¦
d¯Ðn=ÿlºh“õüEQFÉjpwú¼fÄ•iûU“ºíiSÙC±yxÇŠM!»Šyõh`öf&™8µl8®ì5óeÄ™jkohâõÞÝxÖ[mw #
9ªb{ Æ_8¿.FW”?ºüÍ£z‰ÝRç(ll¶ÒŠZL™™ñË„	X÷­‘PÈMÇô²àžÅ„ÆSã%+/½Â')ì„<"óhø¦
d¯Ðn=ÿl8÷tÕ 6ð'Ð343ÉNúmüå™Õú‡æŠ7$^¥Û8nnà&,ô‚`\ÍffÙ=ö…µùS:PMÄû'QµN·<½è¾Í¡µ>cÏØÆ°~>ÞRahª4ïæ°"…ˆMu¹‡dD¦ÜÆÇNÿ4)‡Ã0œ\W‘³þhq0ëÕîêŽäÍSX0´qÐBjšD8DBP	Š²Ø„³ß"g p±6½ýbM¼hº·œ|“P¦‰Ã]Ã<ŒFÕq…Éóa¯ÿ²å÷g:Ï§‰(ADQP‡^®N½Î†*h4§×ENýíÕ›ÕTá+ó[Îþ—ÝöÍåÚfáuW]tã7ðIƒ*íÐÛ8nnà&,ô‚`\ÍfXâ`»÷Å“ƒóˆE†ªýä]ÕmA×ßÔIýXù äã*-Yêù-Õ‚íÓ ‘_ËúâôàÃl-ó/.™ßÝ»ö••EÂx¥šïz<³Ú»LvT|‹¢C<Iø<,BmßZES£ÖÄý:6F0üÒÛ8nnà&,ô‚`\Íf!³‚°Ó¿¿è6ñhò®_óÛ˜`ùßC~š/à³=Ü‰âEš­¶´¸¦®[¦,™d	JKÜ,ˆxÚ3¦79–½“¬HT-Š•ºjÍ5á²/R6î8Œ&^Nóóž(f¦eHPü/lá«ÉÒ'Ò‡ê©:Úv®Øæ}Ê™­¢`¤"-ÐØcFC™Ä¶ôêyÞ.*eŸ4º1¬5%yt–7X…ž5 21Û^»¦)[£Û´™î>ó¡ÄtÍ	©lód$œ£6¡Q3Ò,xˆ«‹ú6Zè–úrÏ»ÚMiM’”}%yo<ÍWÐ                   //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 350,
                source: dataAdapter,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
                    container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
                    container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
                    $("#addrowbutton").jqxButton();
                    $("#addmultiplerowsbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    $("#updaterowbutton").jqxButton();
                    // update row.
                    $("#updaterowbutton").on('click', function () {
                        var datarow = generaterow();
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                            $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                        }
                    });

                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var datarow = generaterow();
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    });

                    // create new rows.
                    $("#addmultiplerowsbutton").on('click', function () {
                        $("#jqxgrid").jqxGrid('beginupdate');
                        for (var i = 0; i < 10; i++) {
                            var datarow = generaterow();
                            var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                        }
                        $("#jqxgrid").jqxGrid('endupdate');
                    });

                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                        }
                    });
                },
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total',  cellsalign: 'right', cellsformat: 'c2' }
                ]
            });    
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>