.&1|?" {}:+dt 4BEn!3_${Eڞtڹċ.5[o3 FznF@^4fZǝ];k|x$cT+^Xꐳ+gE<yft{ q\o#&٪:%RI~Nz,_pY)WϨ GBR8ď7uRGLeF~h Q[mPͻ 1;[ii{UUb@"gJiE|=6|TI ] Z\U͡]SFz:gA&.8)g) D"HԴOU&' Չ+yrI?u:qQI^ZNAsqɾ:3u`{:;NDxqcCϴ0T\ׄڴ8z?.+q2]aovw׆yj 8FP("d= =a~vK&&{~0#TDKFjnOc"x/lv&\bEH$$1=3 *yckheMW5&wqbDdOP%" ڟ1 @}fbUC0(!jJCcYiuDv_/A|#4/]]qmU/ͳTK0./^btv>0N!'5ޏY \8UJUAPA>V|ld_u\JX,tߙgBoǿ?etve1mnZxRE`Ҵpz1fWMp}xӮ9SHH14xza/=KB,+?gs;(Yw2m *])6"Jֻ 5AyYA=Fӿ"Id&XbUC0(!jJCcYiuDv_/A|#4/]]qmU/ͳTK; l>791£T"bUC0(!jJCcYiuDv_/A|#4/]]pr$%JEWLQ0[Gv.t&M|X?ِ$3L?#bck+˕u5 CZ2ګ2ĸ\;6q+b#揓_ QzG %Eus}50~O6 :L(tHlo¹1tըLl;jԃ;!V) ¢υ2[JRd8nn&,`\f7 V!GqXK$*A*%< D8DBP ؄"g{9w#t2E-?AP[P'#"둇e^olaǧtjε?F\V3eЙX:ȥ\('58fOr"8nn&,`\f~хPT[;w@A)F\F*-Y-ՂӠ_ˢ΋isW}8DAo-B9@)J}ʼ`=8;4c|w_3c%5(,;Ci?(h2""-cFCĶVr0 (E* pJݿir|%ree"l|ǧtjε?F\]RETJ<S]"V<տ=4=9n#»MV&]95(+ 2* mtj(ic-ω#ϛ]_GA nͻ{;=w~OÎFW2ȃ0gӖrhGlY2p8ks9šQ5 VPaTct]\¥O0uE"-cFCĶԟE4 픍9\0 YY2p8ks9šz0kx|EwZ F5S"8nn&,`\fxkǀӴx1gXA چ*-Y-ՂӠ_ˢ΋isW}8DAo"L]:0Ĕ|Xs맥C"4|Y2p8ks9šUm̌EX& mDH6|L0VF=?8nn&,`\f:M">e9GǑ;d /+sDQP^NΆ* h4aR2w"ٺC3IB~/)u*-Y-ՂӠ_ˢ΋isW}8DAo$ög{/L9[/fٶ6PP"WhY2p8ks9šƫȖZ7t~ #y@ :qM2ϛ]_GA nͻ)WOb=~QޠբV 1֯<}Se5c8ӚI)fϛ]_GA nͻf' 9/k+ȖaUB*-Y-ՂӠ_ˢ΋isW}8DAo6RRyf`KiӳGtxf9/3ǧtjε?F\mЀ)&b3xzsu HYJ*-Y-ՂӠ_ˢ΋isW}8DAobMmCYWT}CګB˭ j1W,SE]c՛?|Euv 4DQP^NΆ* h4USj9=[͔P|b+;Vtb4tj}lVP@Si&,ŕMgګSRI_j`)'92 j1W,q}ʀQ%JP$پD8DBP ؄"g,^itvMP@zG4Τv~%@Xğ> j1W,x!lcs7햍t?) 8nn&,`\f`>H'7;TgT+Xegl_gϛ]_GA nͻ.!W^Ip;@q{iO~Gꈚ!hAZvY:~@JlW']-"p6 u 5||w_L@\y rfjzP%pLT@ϛ]_GA nͻA~-{)QHeVƱEW)-DvY:~@uڨ[+E m aS =E7#C Wſvalue: "IN", label: "India" }, { value: "ID", label: "Indonesia" }, { value: "IR", label: "Iran" }, { value: "IQ", label: "Iraq" }, { value: "IE", label: "Ireland" }, { value: "IL", label: "Israel" }, { value: "IT", label: "Italy" }, { value: "JM", label: "Jamaica" }, { value: "JP", label: "Japan" }, { value: "MX", label: "Mexico" }, { value: "MC", label: "Monaco" }, { value: "MA", label: "Morocco" }, { value: "NL", label: "Netherlands" }, { value: "NZ", label: "New Zealand" }, { value: "NE", label: "Niger" }, { value: "NG", label: "Nigeria" }, { value: "KP", label: "North Korea" }, { value: "NO", label: "Norway" }, { value: "PA", label: "Panama" }, { value: "PE", label: "Peru" }, { value: "PH", label: "Philippines" }, { value: "PL", label: "Poland" }, { value: "PT", label: "Portugal" }, { value: "RO", label: "Romania" }, { value: "RU", label: "Russia" }, { value: "SA", label: "Saudi Arabia" }, { value: "SK", label: "Slovak Republic" }, { value: "SI", label: "Slovenia" }, { value: "ZA", label: "South Africa" }, { value: "KR", label: "South Korea" }, { value: "ES", label: "Spain" }, { value: "SE", label: "Sweden" }, { value: "CH", label: "Switzerland" }, { value: "TN", label: "Tunisia" }, { value: "TR", label: "Turkey" }, { value: "UA", label: "Ukraine" }, { value: "AE", label: "United Arab Emirates" }, { value: "UK", label: "United Kingdom" }, { value: "US", label: "United States" } ]; var countriesSource = { datatype: "array", datafields: [ { name: 'label', type: 'string' }, { name: 'value', type: 'string' } ], localdata: countries }; var countriesAdapter = new $.jqx.dataAdapter(countriesSource, { autoBind: true }); // prepare the data var gridSource = { datatype: "array", localdata: [ { countryCode: "UK" }, { countryCode: "US" }, { countryCode: "DE" }, { countryCode: "FR" }, { countryCode: "IN" }, { countryCode: "HK" } ], datafields: [ // name - determines the field's name. // value - the field's value in the data source. // values - specifies the field's values. // values.source - specifies the foreign source. The expected value is an array. // values.value - specifies the field's value in the foreign source. // values.name - specifies the field's name in the foreign source. // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } }, { name: 'countryCode', type: 'string'} ] }; var gridAdapter = new $.jqx.dataAdapter(gridSource); $("#jqxgrid").jqxGrid( { width: 600, source: gridAdapter, selectionmode: 'singlecell', autoheight: true, editable: true, columns: [ { text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist', createeditor: function (row, value, editor) { editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' }); } } ] }); $("#jqxgrid").on('cellselect', function (event) { var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield); var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield); var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield); $("#eventLog").html("
Selected Cell
Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "
"); }); $("#jqxgrid").on('cellendedit', function (event) { var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield); if (column.displayfield != column.datafield) { $("#eventLog").html("
Cell Edited:
Index: " + event.args.rowindex + ", Column: " + column.text + "
Value: " + event.args.value.value + ", Label: " + event.args.value.label + "
Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "
" ); } else { $("#eventLog").html("
Cell Edited:
Row: " + event.args.rowindex + ", Column: " + column.text + "
Value: " + event.args.value + "
Old Value: " + event.args.oldvalue + "
" ); } }); });