À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºooL_p—:Þµëv©Øª†sÏp‡¼¤5ó2u£”Su-ü/Õx«|s}ïÉÿïÂó-ªFwÁžÈfï¢$1]F-xlÄ×:-‘ÛOç*_qÜèAÑ®Ê‡nÚ¼Ò>ÿ‰Q×7“5u·Ÿz‰&˜Ù fÖŒÈáÃ<Žëþº_®/(Æ[pp9³üÒùª‡I	€Îæ—*¾†ÑƒÙle×ï2Î@Gß²¶¡”+›žŽn ¿Ò&]níªÙžãY}/„3¾ÐÔ]aAñÇÇËæ2®ú©¶MÒ_8Ã5,gÄÆÓ›„y2/»x·Ý !Ï>PÌ~$i<GJ]šv…™‚ã!™çùU»>%ƒ­dÍÏÏx·bC’‹îµ­ØöÚ‰Ò»JËq¨ò‚™¼I%Oð„øA‰Í]æm±®
-/[>N{òm›} 7›"µÎ‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õ¢s=p3îâ¤ÞqÅÞõåŠ>èKÞ¬cM×ÑŽPJá›®bUC0(‡!j¸J¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þƒq‘mÊU¡/Í³™T´K‰þ¼:øô¿S˜Éøè­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ž5«x-±ëBj€/EïÎÖÿaa [XžúD¿Å¼kÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ[+ƒøªäXRkkÃ¨µ 5Ãé9Í-º¢ÇRñ³g@ Þ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯zËVW"Ü³Cû$–‡Œ£Û·1è³©ØVîJn‡¬ýØ2¼;e9¢Ù–~y‚‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õð:6ü"ñ…£YÈêå[ýrfN)È¯Ñ)¢Ç½¨&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:¦Ìe˜ÏÕÿ8¡A˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€åvPÓèÐ€ôüoJ–æ‰Ó\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑuÖîþ^ß¬.’döB œes¬ÅÑ^ùåHÉBÊ}öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d¬=¿=ça’~æ¨v°K&&Ì,$ãDƒ¸ïY”6wßt _ŒMd†â‹-f —(EŽ 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åƒ^ˆ»üß9C]K<³Ü³B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›Wl¥Û žnç+{‹Håýh«P„úö83–”žÐf=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿¬¨kÝ­ç!W×Þ‹¾y<ÙVNp§RêOØ¡ÑÁ[™ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯Å‰8·T.G@Þ˜ùw+ªü-¯m)Á§mÚÀnn2”¡¹Âþìåäy›êcU0LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn ÓÅÓ_o‹¤™s<ª³‰ì^­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà\ŒÇ+…¼5HŠ¶d`;{å,õð·"a¾epNe¿·«rd4Û©òÃ2ÿ.ýµKÌQ&Ö¥¯qauªÙ¬¬uÚ‘sÿ‹füæ„´á#LÐÙP€ª0P7ò±Ëjxc²Žm
3j‚±mc3^j¡éßŸÎÉˆàÝ“†Z5ˆà‚¾¬Æ­.ÂN>v´2wá×ðüÔG‡(dU…õfÊªb÷ã ^á ²"®7½¶¤"-ÐØcFC™Ä¶ôê3R5.¶£Šy_ÌçyÔ¼òÛ8nnà&,ô‚`\Ífg˜Xãƒ4›lLjÐ$œ×‰Hj Ab~d	\5ÏZåê=y_z¼ø2\2h¨#K8/ÄcrQŠ|Û¼Rý£Ê£VÆ·Ú‘êóè¼×–}¡†b¾¸UDd;#*i´óÐf™Û8nnà&,ô‚`\ÍfŠ(¬%›€gïN®Ç“´Ýkª™4/}fR“yÄ Øï…-}Wn8ìt¡d’þyÉn#†Â»MV&]9¢5(Ù£1Ÿ¸¢ëãoåVô€Þ³ÈBz¯“^"ó³.ŽXØÆ°~>ÞRahª4ïæ°"…ˆMu¹‡dD¦ÜÆÇN×7Ÿ!öHÿ“ÀO7m!%-ëÕîêŽäÍSX0´qÐBjšD8DBP	Š²Ø„³ß"g p±6½ýbM¼hº·œ|“uõæáÐ,žXýtÀôï3a¯ÿ²å÷g:Ï§‰(ADQP‡^®N½Î†*h4§1gaœñ$ú8ñÕO×€”ÄÅA¨bÒp G#q»Ô¡$°ÊIðpÀ¢·°iïz„XÌéÎ·+ÿC ‚ª1ü¤"-ÐØcFC™Ä¶ôê…Á½P Ú}ÃU¡ÝDQP‡^®N½Î†*h4§ªÖÚg¨P4)ŒU­YX»AÑ	ëñ­6ôkÚnÜä„ß§¯*œ¯†óu¼Í	¹N¨’¨½¬| NC¯Î&GI~­Ñ§~\ëA_ˆDG‘ƒú9uk~La^‡½¥ÄkZr¬hð^¸„:!üÆwZ„øá‡F‘ú#Õ6VÍ*†¢¥[ÁÑhÙ.¢%£õøcQÄÌÖBÇ‡nâ:ˆ°ZŽÒ3°ºm.À‹wßMFw§± Á’•$<ÀTZäŽÊ6½lE‡[•DÊvŠY^ô_n|Én”Ç¹o/}ËP6œ¿’ë‘m[LwÖùÇù®[æ/óõ¼j8/·Rz4-å4%‘Ñt¥Û8nnà&,ô‚`\Íf^}OùÞÅMÊp¤Mˆ›EQç¯ÏsáÃˆKn‚ï$’±¦´‚IU ñQ$G€ä\›Í§µ{ºÕ¦¶*[Â|þQ:]å¤ÖTƒÞ
î/åÈtˆ8 ²Â£('wÃ@ÏÈ0$ˆ‡Û8nnà&,ô‚`\Íf%•tvúá‘-ŠcIÂ€1¯Ñªë„g¨ÞëÏY•8Q
uNJÒïÑ«œ;V=ÅMëu3.Ïk“{ÈÙÞ#OÛ8nnà&,ô‚`\ÍfÂ½ï°<|l›ÉôN»Y¯ÿÎü¹o2¡
ô>òôÐ>œ·i¯;V²¯ÿA™`&¼
á¤ó>#ÀÎ2‹Ú‘Ñy°E#h¬û@°è(mò@&fÇ;N›r»%íô,y÷½Ð”ü7<„Qkw¿. —uöæ´§œ¿T}é(*áUtrL¯¹õã|D‡1L”ê$^ˆ¤þ¢œ¥Ôþ­3½3;'œEr0KõÊ>Þ!\Ö€»`E¾PQ€…¼t<1WH{ÐÖ¤Œœº[âzª%#¿º×KñôXáUópL¯fà5Ó©Î{ÍÛ8nnà&,ô‚`\Íf¬(R½\Ÿ‡KNCÚî€P3d5¸ÓU×C<|NéÈÓ[CÚÃ/‡ÔÑZŠ:Õ¶0kÐ%`SU ûµ„é Öb<¨°õO­”þd­qçúQ2––kÂ\‘¢âIHz*×îÙh±yŸßØº~Æ‹“³<€vkü!’6è¬Õ{wy`p3„Š¢–¬L,._êz¦þÂµ«Vº±Ø|?”i+$¸!Ÿ©šh¶Û^®zœŸ	íÒ¬ëèš¿³NÖºNòLb¦9ü¯4µ±‘2Y6¢î›ÃôdÌâœå0Z9?`æåùN¤|ô=§ET»Øé¿¬.LÃDiïS1¡”xq†cZWO}Œ‚Ú•ŠÑd´Äh‰S®Ç²¢,Ñ¬n [Š\%1ë¼#ùî1äH¨Õ‡Ü5ç;5‚ùf$(„R¨~h±éˆîO_µ3nÜv3]-2”*óa·}ð=ïãCoå	3Ê`šè”é¾7bqn¶O… Ke¥»àÓKCs‰]3M¹¾:îŒ½«*cq³E®¾ø°4;jP,Í²ZÜõÛ8nnà&,ô‚`\Íf8gd‹SUþû×-—Â†’­%p¾½ZŠ|Ø“Ž:2áÓ\£^^ž!´9€&Ø(ÙQ|£Þx½¬¥3È¯ËÔ„z ªýç€@c•ðíÝâ†7ûK M¦êûÊÔKºØ(@^…m:f®Za9ó#ïë£„™6ÿoÒ~ƒ¯Åš2r×k_Í7™K’ˆÐôp•ãY{ttï0'!*aÊæ;žôÄGÁ|;´¸ö7$Ï8({E?Õ¥ºˆ4‘ÚžK±Ö"Y6Áô;ò´Ñ®°Z8æs¤²£êWáTàÃ£B¶k¶£øÕ¹®Dõ[5ŠÛ+ñ§L‰`BPŸA—6%6”èþêêo7*/{Pë?{«iÉ4ÊIÝ’”Ô´Gáˆ}Iy°Ù#òUïòt~ö?R‹–ê”F4Ö“ÝºØÅ9«š6NŸ™1`!‚øJ`•o³žÌ¸èUN*ëÔ-Jºº&!B'o1ñ¸:”Ù}”­®,çàñõ0²ËÊÉ§ ´Ú™ÙÕÊsñà¢Åÿò­¬Ëºo°×šÔàhr}Ù@&|«w-ÅI–”•WU9ÕlÐ`®²Uc³mÈj,Ììÿ¿+'ÙYðGþòt(ôèÖèHz “Lt¼ gA        {
                width: 850,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                altRows: true,
                ready: function () {
                    // called when the DataTable is loaded.  
                    // init jqxWindow widgets.
                    $("#orderID").jqxInput({disabled: true, width: 150, height: 30 });
                    $("#freight").jqxNumberInput({ spinButtons: true, inputMode: 'simple', width: 150, height: 30 });
                    var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                    $("#shipCountry").jqxInput({source: countries, width: 150, height: 30 });
                    $("#shipDate").jqxDateTimeInput({ formatString: 'd', width: 150, height: 30 });
                    $("#save").jqxButton({ height: 30, width: 80 });
                    $("#cancel").jqxButton({ height: 30, width: 80 });
                    $("#cancel").mousedown(function () {
                        // close jqxWindow.
                        $("#dialog").jqxWindow('close');
                    });
                    $("#save").mousedown(function () {
                        // close jqxWindow.
                        $("#dialog").jqxWindow('close');
                        // update edited row.
                        var editRow = parseInt($("#dialog").attr('data-row'));
                        var rowData = {
                            OrderID: $("#orderID").val(), Freight: $("#freight").val(),
                            ShipCountry: $("#shipCountry").val(), ShippedDate: $("#shipDate").val()
                        };
                        $("#table").jqxDataTable('updateRow', editRow, rowData);
                    });
                    $("#dialog").on('close', function () {
                        // enable jqxDataTable.
                        $("#table").jqxDataTable({ disabled: false });
                    });

                    $("#dialog").jqxWindow({
                        resizable: false,
                        position: { left: $("#table").offset().left + 75, top: $("#table").offset().top + 35 },
                        width: 270, height: 230,
                        autoOpen: false
                    });
                    $("#dialog").css('visibility', 'visible');
                },
                pagerButtonsCount: 8,
                columns: [
                  { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
                  { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
                  { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
                  { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd' }
                ]
            });
            $("#table").on('rowDoubleClick', function (event) {
                var args = event.args;
                var index = args.index;
                var row = args.row;
                // update the widgets inside jqxWindow.
                $("#dialog").jqxWindow('setTitle', "Edit Row: " + row.OrderID);
                $("#dialog").jqxWindow('open');
                $("#dialog").attr('data-row', index);
                $("#table").jqxDataTable({ disabled: true });
                $("#orderID").val(row.OrderID);
                $("#freight").val(row.Freight);
                $("#shipCountry").val(row.ShipCountry);
                $("#shipDate").val(row.ShippedDate);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="table"></div>
    <div style="visibility: hidden;" id="dialog">
        <div>Edit Dialog</div>
        <div style="overflow: hidden;">
            <table style="table-layout: fixed; border-style: none;">
                <tr>
                    <td align="right">Order ID:
                    </td>
                    <td align="left">
                        <input id="orderID" type="text" readonly="true" disabled="disabled" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Freight:
                    </td>
                    <td align="left">
                        <div id="freight"></div>
                    </td>

                </tr>
                <tr>
                    <td align="right">Ship Country:
                    </td>
                    <td align="left">
                        <input id="shipCountry" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Shipped Date:</td>
                    <td align="left">
                        <div id="shipDate"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                         <br />
                         <button id="save">Save</button> <button style="margin-left: 5px;" id="cancel">Cancel</button></td>                    
                   </tr>
            </table>
        </div>
    </div>
</body>
</html>