À.¸ï&1|?"{}:+dêV8Šms¬M.h%bŒ²‡êºQ#›‡oÞ›õÆD€ÝˆŽn#Ã·ð˜Â¦Ó3è Åz¥k&Z|à¼Úy‘ƒäËHÅ‚Íº.uƒ‰; è0µ×uÝÚä Ï‡sßKsbw¯>#1cf»6ËÃÁ£*:ÍQÖ‡À·ÕÌXñ¯ê6,«OU-]É=Ryß£ï’jšäuxý	W@±záDB;f¼çß¦ÅÛ¡FËèýbÚHV!*»]`›³Pž<zÍ®I»tqðÔT×Yˆ!RénpÿV#î¶Ö»‰îÿžþŒAíbÓMŠyR¹Œ÷Ÿw’§§Ã–sèOÓ»6í|¤²èëTŸI³š]î¬æÌò
òZ½\U‘ÙÍ¡]à>«F2!cU6Añ„áÚeLh/"xáÒ£i"2ÖÆÈ“.±Ng±çô”QcQóð`˜Ì¬C{63ÐË‘øx§Ú;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ –«¯³<›ùŠ.°KÛ'{vøÁ¦Ã¥ScS6‰6‰¨gGÄ™!{Å"9¿ÒÎ1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝûÐyÝÄö6Šbì'Üõ‘PÔ_`w¯Ð%Á@Ø×Ll9W:#.ìóKö‹ÃÕ6& ÛgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠð:6ü"ñ…£YÈêå[ý:^õíE;ìHÚ"82P^–Ó*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇmXYâ®ƒŸ¡êûbÖ÷Q>Ïõêã éæÜ?<±B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›æXìƒ?ˆã4}¨amº)ªZãXQÆÎÇx­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ßIŠ¡¿tRAªôÐ± V÷KN†%j¼è(òp¯êagÁ‹Ù±Í0;´d1gçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠð:6ü"ñ…£YÈêå[ýòÓà„£KÜ¾@-ðÓ*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇmXYâ®ƒŸ¡êûbÖ÷&´º øÅ"w¼(a%­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ;máëIÓfY`Çù¢vþ•sº¢q‡Û¿)p‰G€ŠÔR0Æ­YD,\;¬?¹¾¬Eâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°IWl¥Û žnç+{‹Hå"©£¨ˆ ¦(ÒæWŠ$¢T&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckêÞS`ì“­òŽ˜ð÷ìW³-ÄPÈ:„µVOXAëtLK‚ÁÌ€üc"íSœ¶9ÒEZÙ¼f^QsóJ¡fõéÅúJ4szxõ4è¥óŠs
Ø?‰C$7ü.%Ô}B-Éh†Ùvš†ö¥›Ù½6AÎKÈÑÁ¶¦ÓZH›Ã›ó}†–œöµ÷3”¾¬Æ­.ÂN>v´2wá×ðÛ2YÇåà½{Ï}LV³.÷÷Ë©ú÷ŒQDI
¨Õ`ìÏ0“åè–â¸ä¼?A\ÈÈiç^‹î"ÿä¦–3ÚvÊf!ÛÞ‘œÕ;Ù5s% ~µG¨ì`-XæÍÐö¼Á{ñ¤†.ä°"„®ÎÏ›]•_ÑÓGAÈ
nÍ»˜áƒýžÔÁ"†BeüTëtsZ†„_Äö[x2‡yÐW ÏQxkLèYP2N9ìîµÍãÛ8nnà&,ô‚`\Íf"f¤Åø­ H%28h¹š`‹ý”‚./ç!\¡‹À
"zAÍ\©[YÆl’u*aÀC™Ãï7‹#C„¤	Ž˜WÅ¿›2<ã1t82ô²öD#>¤¯a¯ÿ²å÷g:Ï§‰(ADQP‡^®N½Î†*h4§)¿Ù®WÝG×ÿÍ0i†	°<d?MÞh…`+áÒ¸×¨ý¬ ï.zÄ)ª%q`×Û8nnà&,ô‚`\Ífëú!tËzy&‰ÇÖDþ9­$î§SÞ­®ŸA®ÒDQP‡^®N½Î†*h4§yxÇí‘øâO[‘ÜxWîéÄßç
îsYÂèÍ&uM¦”¿jÄ5ˆÃ–d2K—"y#ÅD—GP«šJ¾\N¼÷nC}Ô/cœœ6f½H4l?"Ë”üäðˆTY;—CQ^YFqI[Zªî"DQP‡^®N½Î†*h4§H%kåb?hì¬cÕê¤»AÑ	ëñ­6ôkÚnÜä„Ã™4îƒÏŠiQ¥4l?¦³ŠÒúêàJÌÍq	nP}ßóZ	/Ó‡¾õ^üìHyŒÃ¿+Mæ}‡“‚è9z>zªR¾ìö7f ¢‚ªæxŽº8°SÌ;)Ð„Š%f‡†(DÔ^U"ãÛÅ«¬’¡6\‰æ4IÄräÿõ·ÿíçè=è£yFT¡ˆV<@À©·¢1µéþ¹\4ý\}HRÕõëˆ}-•“mg|ZØ›Ëø°ec6­‹TµÈËAe­ÃùKûµÂÚ=žÍBþ Äô`"ÊÄ½>ª#Û8nnà&,ô‚`\ÍfÔ.l°ð{V”ä÷7‹o8Ø$ëªó°B©'2$:·‹ÁOh½æqÏÅÔ<i©8P¶Û8nnà&,ô‚`\Ífþ6†S“6é*XnVK!^Í,fDíæýZñ
u›U³.P¬%Q@9å”¹dm¢™C¡Â”±¯¬‘NS’Ç_òÊôWä¬“5öGB@
`t·G„Ö\M˜Ü°š˜t”Ž‹5nÿIëê$ÿ	Òc¸i6Û8nnà&,ô‚`\Ífì'ž˜ãæ3q$‹×Ð¤"-ÐØcFC™Ä¶ôêûBZ|ØÀ]š6#p¢•PÈµÉÏ#þtLaZR^7W¡)º=ù·ËË=/7y„µ6Ì1·“:!T³Ž¾ñegá6›œöî”Ä¨]»þÜá‹¡ë++Tc|OÅÒF*b(œ¨v+¼õŸSÕ¶R¢¥~¶s‡*„ÿãáPì7¯G»\–@f¤qïØVVFžò¦ÒF$èPX[Þ›ní÷03ÐæS‡5nAÕª–&¼:’Èbäa™1‘µl#ÁNÄ@£ÚÔ¹±Ú{5=¡ö®»Ô7-Þ`švYiŽÈÃ¥½§´~?HO¥†¯Ý{CA¼W\Vy¡4ñ§ÖkÛ8nnà&,ô‚`\ÍféÂn<o@×_-;úþÐ|>oúÇên+-È¶)×òaG9€iÆåÝa	ó•L?™Ãï7‹#C„¤	Ž˜WÅ¿›‡Ûñª«	‚×äÇ==¶ y‚,ŽÉšK2¹—Ä>²ŒIÐ(:¡óòmè·“:S;iúÀK…	ÛJÚéiß)86#çw3óª‘:
–ÜúÏYz^Åkn›x2¿¹å‚ô·ZñÍÐ§Hxº…ãë{Ý¤U€s% ~µG¨ì`-XæÍÐö‡Ûñª«	‚×äÇ==¶ y757·Å@Ä}^àQ’§ #]Én#†Â»MV&]9¢5(ÙCø‡ÃÉhúÈy§MH»ÄÛh9ˆ@lõ¯æ@(_ä(	h&6E“·û±¢2Àé¦–3ÚvÊf!ÛÞ‘œÕ;Ù5wK­GŸ"ì»¡ŠýòCëÕîêŽäÍSX0´qÐBjšD8DBP	Š²Ø„³ß"g p±6½ýbM¼hº·œ|“ÿs¦º#/Ñµ£Ô8‡™oÏQxkLèYP2N9ìîµÍãÛ8nnà&,ô‚`\ÍfÌ;ó¸ÐMëÚ\ÿ„éDàaptk`SY„Á˜rquA:èînVÛ=_§	¸Û8nnà&,ô‚`\ÍfÈ¡à4Ë®ŽhìO–ŠÕTfÇqC`Z44–ÚKºŸZáÿ=I{w&¤0¨ÛÆí‹LÀa¿ñë´‚—5ÏÃ ðÙäU=.L]0>úƒÿìÒ3¡gîn7Î'%mÌiÚK¾.¥"]l™Óˆ©58µ¨:øÚ¶èDö‘’I>F)…œ0±ÒérfÈé&¿!uˆfÕNWª3Ú.¢éºµ{8X´WÑ¤"-ÐØcFC™Ä¶ôêÿ„Ø‡Iáº"k_ÞiD/I×s:J5ËÄÀ3ÔÑêÕ¶ÓÍƒ/ÏPÖÂa–4‹h^½HyŒÃ¿+Mæ}‡“‚èé˜¬“^"Dðö]æ—ŠÄ¡·ÓŒÿÌ+ÏVªDM,ó#80!ŠZMI”ñe®ú>*#ßC–ŽnÞ|Ð–ø°lâð;S1¥²“àWY¾ÔZ’#mˆU1 OtPê—gÙi…#Ì1·“:!T³Ž¾ñegá6›œöî”Ä¨]»þÜáÕhçÄ¯¨(AÌ)wÉ[
ß‘g$¾’T9âüû-¨…bØ©»Àfñc„ûLë(œÎlzÑnàÿc ôÔ#PÝ2ØÓÛO”Jß3Ÿ\Nç°/5ð“¥{\S„¿¦Ž˜Ë˜rkÎ¤	¿ggÕ¿b‹›hP=*7³‡ÊÎšÔmÓ~P\®5Ð±i .§‰V­ßê}´ð;¾ÞA‹öQUô—89Á™nY—hÉ»ºñ!½(Ú6òÎéßÀfë®æò$mÆ{w4©ó-+Š2]ðÿfU¶ag5\×8§¢‹P	ã[=ÉtôÊÃk%ï_:Ïø‘ë 	z/ÓºŠuÒd¯ášxÉÉ¶LLmýÇIû™R0/[²Ëü®{9Úþ6÷vfaÿg2,#êú˜@á>4ÖÒ >k¡:ý¨é_ki³øQ°1Én#†Â»MV&]9¢5(ÙDQP‡^®N½Î†*h4§ÊÛ±é>HÊé•ÍaØ›šçÊr¡©Ô‹óÞ¬kÃ,+mìjèkB€ð’yrþüDqa1CÐÂÜÈ
Š:&¿ã[Ì|D|^³ƒÏÔ"…Þ-6Mø ÜÂY¼žŠXËMgëÍ}w+£j•/£—†àt¸`JŒÛÎÊ¼?ËmR÷t;‡Î'ÑPÊ@íÊtÑáÐÜŸy@ëOŽb¦]ÕÒ
™ÝV½_œ¸¡]÷•†¦jÊüwí%I[ÉÅt: 'Ship Name', dataField: 'ShipName', width: 300 },
                  { text: 'Ship Address', dataField: 'ShipAddress', width: 300 },
                  { text: 'Ship City', dataField: 'ShipCity', width: 150 },
                  { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
                  { text: 'Shipped Date', dataField: 'ShippedDate', cellsFormat: 'd', width: 200 }
                ]
            };

            // update details Grid when the selection of the master Grid is changed.
            $scope.masterGridRowSelect = function (event) {
                // event.args
                // row key - event.args.key
                // row index - event.args.index
                // row data - event.args.row

                // key === Employee ID
                var key = event.args.key;
                var filterGroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filterValue = key;
                var filterCondition = 'equal';
                // create string filter
                var filter = filterGroup.createfilter('stringfilter', filterValue, filterCondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                // filter all orders by EmployeeID.
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }
                $scope.detailsgridSettings.source = {
                    dataFields: [
                        { name: 'EmployeeID', type: 'number' },
                        { name: 'EmployeeName', type: 'string' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    id: 'OrderID',
                    localdata: ordersbyid
                };
            };

            $scope.mastergridSettings =
            {
                width: 850,
                source: employeesSource,
                pageable: true,
                pageSize: 5,
                created: function(args)
                {
                    masterGrid = args.instance;
                    masterGrid.selectRow(0);
                },
                columns: [
                      { text: 'First Name', dataField: 'FirstName', width: 250 },
                      { text: 'Last Name', dataField: 'LastName', width: 250 },
                      { text: 'Title', dataField: 'Title' }
                  ]
            };
        });
    </script>
</head>
 <body ng-controller="demoController">
    <h3>Employees</h3>
    <jqx-data-table jqx-on-row-select="masterGridRowSelect(event)" jqx-settings="mastergridSettings"></jqx-data-table>
    <h3>Orders by Employee</h3>
    <jqx-data-table jqx-settings="detailsgridSettings"></jqx-data-table>
</body>
</html>