.&1|?" {}:+dt 4BEn!3_${Eڞtڹċ.5[oV}$"7..p0?=W2W b3ddK}G#Pb*OP~V$D9TE5svPX쾄Z1,' !;*h(oܦGt.(Oʿ ԉd.BSO@'b Ì F rP<nKFũ6w0Ae);- ` 9ELkIiT6UR1@a-lHẻ2N TQ͙|ѓw-$B j&9)ֈK1UCzD(8?Iv2/RS&\bEH$$1=3 *yckheMW5&wqbDdOP{uo&M|X?ِ$3L?#bck+˕ušoUME V*@kf:Q>?qQI^ZNAsqɾ:3u`{:Wl n+{H8{řy5@и&&\bEH$$1=3 *yckheMW5&wqbDdOP()s|=3䳉bUC0(!jJCcYiuDv_/A|#4/]]qmU/ͳTK0./^btv>0N!'5ޏY \8UJUAPA>`Z SPw֒Ny߮y&xo2;e9ٖ~y6\2KȘ  jJH87]':6"Y[K@-*vT@hE _K#ضe%5^ĴM[:;,{*Op318cgam`0D*vT@hE _K#ضe%5^ĴM[:;,{*Op318cgw2vE*0Jd^g5l o:hREa^=e\% p@I#{wc,C?/d>=KB,+?gs;(Yw2m *])6"Jֻ 5AyYA=Fӿ)GWl\ׄڴ8z?.+q2]aovw׆yj qQI^ZNAsqɾ:3u`{:Wl n+{H {=^+wZB"TF(ʶ^#>qQI^ZNAsqɾ:3u`{:Wl n+{HSmnu*dnZP(tBg #(1a{Vn2;e9ٖ~y6\2KȘ  jJH87]':6"Y[ҴXV.Xh&\bEH$$1=3 *yckheMW5&wqbDdOPr=`5:oe+gXşCbixJLfiB)=S]+93-@M(uHmn?- 1QM𗁠O{wP3a^g5l o:hREa^=e\% p@Iv2w,6 EA* ɟ6&!"4ey%08򆓉)P=y&Ggqy-DmjkByrDqan7l|-֟'%5:P [C,I;wAvrf&!ufNWqdǸ VFoG8nn&,`\f4Xh쩤%sR9.PvKD-}Wn8tdyn#»MV&]95( L 7X9@l@(_( h&6E23vf!ޑ;5-KxMwٻySX0qBjD8DBP ؄"g p6bMh|wQSJ)s` Ҙn9ߌmR$nMudDN L (UH C<"d91D8DBP ؄"g p6bMh|OY{4!TZa2g lճYxo*rf&!ufNWS;2)>&Z꿕!B7e"Bu$?!6rdۤ%qr 9WC1QRY%v=ˏg'#PGrd'/rC`o;<'k۰`$ $L1sdv@q*"Nj8GKyN#03kMpgrr2|Vx)Z2]ٌ̮B<u9Q7Ŗ/w"iӻmִ6Y*S8n*.1% WF5l3R)G\ό>'AX C8kR++yer.GGY0ƌע'WӾȑYQ&"V˓ш`K \ﱎ\\I4dy3A ,}4GOl;t+>د, B{C>iز4>rzVGNBV"-cFCĶ꺛$ }'1 sXbB;ZCo_Qx.\m?y/[f"/ 45|3k2G,u6: ;=O' %< ) Ǐ絝قkB0k,@Pc0̨ oݰ.* #P; ` /"N(+G{:3ZA-om&&5kҿY5¯oێ /"N(+G{:3c[6p!".DzttCDDV"܎>Oo{fdVѦ t՞Cb?GF[L-LY@ةfcL(^kL l+19`@4/dv,`k5hShC9R]p#~ /⨌iJ=$=\4N>׌Lխmd]QL&nLX GO8nn&,`\f܇PN;ѥ% 8~4w&rU8nn&,`\fx-`3￞΋deL^֯'N9Hyÿ+M}阬^"D]旐ġ)}r0J/A B V3;`xQ*,*. UtI ^BR19@!w$$DQP^NΆ* h4'5{*$Ju(|Β8\o.cL8k}Ol;t+>د, HlEQg8nn&,`\fbˆ_8 J`yvsUA`8nn&,`\fn3m-uDQP^NΆ* h4 dhXUFields: [datafield] }); var column = $("#jqxgrid").jqxGrid('getcolumn', datafield); textInput.jqxInput({ theme: exampleTheme, placeHolder: "Enter " + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter, height: 23, width: 175 }); textInput.keyup(function (event) { if (event.keyCode === 13) { filterbutton.trigger('click'); } }); filterbutton.click(function () { var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = textInput.val(); var filtercondition = 'contains'; var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter1); // add the filters. $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); $("#jqxgrid").jqxGrid('closemenu'); }); filterbutton.keydown(function (event) { if (event.keyCode === 13) { filterbutton.trigger('click'); } }); filterclearbutton.click(function () { $("#jqxgrid").jqxGrid('removefilter', datafield); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); $("#jqxgrid").jqxGrid('closemenu'); }); filterclearbutton.keydown(function (event) { if (event.keyCode === 13) { filterclearbutton.trigger('click'); } textInput.val(""); }); } $("#jqxgrid").jqxGrid( { width: 850, source: adapter, filterable: true, sortable: true, ready: function () { }, autoshowfiltericon: true, columnmenuopening: function (menu, datafield, height) { var column = $("#jqxgrid").jqxGrid('getcolumn', datafield); if (column.filtertype === "custom") { menu.height(155); setTimeout(function () { menu.find('input').focus(); }, 25); } else menu.height(height); }, columns: [ { text: 'First Name', datafield: 'firstname', width: 160, filtertype: "custom", createfilterpanel: function (datafield, filterPanel) { buildFilterPanel(filterPanel, datafield); } }, { text: 'Last Name', datafield: 'lastname', filtertype: "custom", createfilterpanel: function (datafield, filterPanel) { buildFilterPanel(filterPanel, datafield ); }, width: 160 }, { text: 'Product', datafield: 'productname', filtertype: 'checkedlist', width: 170 }, { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); $('#events').jqxPanel({ width: 300, height: 80 }); $("#jqxgrid").on("filter", function (event) { $("#events").jqxPanel('clearcontent'); var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation'); var eventData = "Triggered 'filter' event"; for (i = 0; i < filterinfo.length; i++) { var eventData = "Filter Column: " + filterinfo[i].filtercolumntext; $('#events').jqxPanel('prepend', '
' + eventData + '
'); } }); $('#clearfilteringbutton').jqxButton({ height: 25 }); $('#filterbackground').jqxCheckBox({ checked: true, height: 25 }); $('#filtericons').jqxCheckBox({ checked: false, height: 25 }); // clear the filtering. $('#clearfilteringbutton').click(function () { $("#jqxgrid").jqxGrid('clearfilters'); }); // show/hide filter background $('#filterbackground').on('change', function (event) { $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked }); }); // show/hide filter icons $('#filtericons').on('change', function (event) { $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked }); }); });
Filter Background
Show All Filter Icons
Event Log: