.&1|?" {}:+dt 4BEn!3_${EjTb144{GyHWo$$k6&j-Uu(xjs%#o,˜1?ցK0G~#SHHi81\[쬠4==ϫ xrH<6g9_qF>!;ިs_}5ޏY \8UJUAV{>/w>8FP("d= =a~vK&&pCV`Rݻn0N!'5ޏY \8UJUAPA>vPЀoJ\ׄڴ8z?.+q2]aovw׆yj 8FP("d= =a~vK&&> D2M1,s#A!p Qv^g5l o:hREa^=e\% p@I#{wc,C4Zׂ<ҳ}k+2;e9ٖ~y6\2KȘ  jJH87]':6"Y[[ݕbAQiTbUC0(!jJCcYiuDv_/A|#4/]]qmU/ͳTK>`O/0Áfq,EoLfiB)=S]+93-@M(uHmn-Ƞ7v6-ґ #SO^g5l o:hREa^=e\% p@I#{wc,CU6lq\ĸCB"TF(ʶ^#>qQI^ZNAsqɾ:3u`{:FJ<[>Ĺ4P >G#Gtr}Z TQ͙|ѓw-$B jd1=ԢmO UPE6rf]VG9ɷ0$ ҾA1wu!1O8+@~Dc{ƭ.N>v2wYECjHseGnex*\p:٢.m83wlnU< `b6Õ`onZOtc`_{LtP]Ὠah!k|]}='h;4LU,RusbkVd饀ai7\k)/"µ/{VP9 w1ɒEcjweXhnx'* z{p/*?Wަ)b}N.&?w[{)J0L!4Y1n\E$#\79#lK9Cmd1#E 2A_[uPs0(nN"{X}BᚮH+sFo9{A^1'}$c=6)fLtV*9o;1I3-g}.9YUйm, ݗB_ŗ+sv%d[Qm])Ȝ^u8p52P!g=ft_A_ z+eYp32s^ S>|8HHiDFPskS]YO}>x( cyK( Sƺ=)4] _9Vb Gk|[^ewyMJ["䫢Ap.'o%Zg#ؘK! {nE !/{{M("TNhK"a@Lb@p 3n#»MV&]95(!sQG(#ޅ[zgJs^1D/Gs;b5x;2"YV35t7gwT5pү<"d91D8DBP ؄"g p6bMh|4C.ղ h}>ni(*&ٙ&8nn&,`\f'C֧UB{+g}xR ~`>T7-}Wn8tdyn#»MV&]95(߲8, 5E~m, type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 600, source: dataAdapter, ready: function () { // expand row with 'EmployeeKey = 2' $("#treeGrid").jqxTreeGrid('expandRow', 2); }, columns: [ { text: 'First Name', dataField: 'FirstName', minWidth: 100, width: 200 }, { text: 'Last Name', dataField: 'LastName', width: 200 }, { text: 'City', dataField: 'City' } ] }); // create buttons, listbox and the columns chooser dropdownlist. $("#applyFilter").jqxButton(); $("#clearfilter").jqxButton(); $("#filterbox").jqxListBox({ checkboxes: true, width: 160, height: 250 }); $("#columnchooser").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 160, height: 25, source: [{ label: 'First Name', value: 'FirstName' }, { label: 'Last Name', value: 'LastName' }, { label: 'City', value: 'City' } ] }); // updates the listbox with unique records depending on the selected column. var updateFilterBox = function (dataField) { $("#treeGrid").jqxTreeGrid('clearFilters'); var filterBoxAdapter = new $.jqx.dataAdapter(source, { uniqueDataFields: [dataField], async: false, autoBind: true }); var uniqueRecords = filterBoxAdapter.records; uniqueRecords.splice(0, 0, '(Select All)'); $("#filterbox").jqxListBox({ source: uniqueRecords, displayMember: dataField }); $("#filterbox").jqxListBox('checkAll'); } updateFilterBox('FirstName'); // handle select all item. var handleCheckChange = true; $("#filterbox").on('checkChange', function (event) { if (!handleCheckChange) return; if (event.args.label != '(Select All)') { // update the state of the "Select All" listbox item. handleCheckChange = false; $("#filterbox").jqxListBox('checkIndex', 0); var checkedItems = $("#filterbox").jqxListBox('getCheckedItems'); var items = $("#filterbox").jqxListBox('getItems'); if (checkedItems.length == 1) { $("#filterbox").jqxListBox('uncheckIndex', 0); } else if (items.length != checkedItems.length) { $("#filterbox").jqxListBox('indeterminateIndex', 0); } handleCheckChange = true; } else { // check/uncheck all items if "Select All" is clicked. handleCheckChange = false; if (event.args.checked) { $("#filterbox").jqxListBox('checkAll'); } else { $("#filterbox").jqxListBox('uncheckAll'); } handleCheckChange = true; } }); // handle columns selection. $("#columnchooser").on('select', function (event) { updateFilterBox(event.args.item.value); }); // builds and applies the filter. var applyFilter = function (dataField) { $("#treeGrid").jqxTreeGrid('clearFilters'); var filtertype = 'stringfilter'; // create a new group of filters. var filtergroup = new $.jqx.filter(); // get listbox's checked items. var checkedItems = $("#filterbox").jqxListBox('getCheckedItems'); if (checkedItems.length == 0) { var filter_or_operator = 1; var filtervalue = "Empty"; var filtercondition = 'equal'; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); } else { for (var i = 0; i < checkedItems.length; i++) { var filter_or_operator = 1; // set filter's value. var filtervalue = checkedItems[i].label; // set filter's condition. var filtercondition = 'equal'; // create new filter. var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); // add the filter to the filter group. filtergroup.addfilter(filter_or_operator, filter); } } // add the filters. $("#treeGrid").jqxTreeGrid('addFilter', dataField, filtergroup); // apply the filters. $("#treeGrid").jqxTreeGrid('applyFilters'); } // clears the filter. $("#clearfilter").click(function () { $("#treeGrid").jqxTreeGrid('clearFilters'); }); // applies the filter. $("#applyFilter").click(function () { var dataField = $("#columnchooser").jqxDropDownList('getSelectedItem').value; applyFilter(dataField); }); });
Filter By: