jQuery UI Widgets › Forums › Grid › Multiple Filters
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.
-
AuthorMultiple Filters Posts
-
Hello,
I want to filter the grid using multiple filters. For eg: Country, Job Title etc. I could see Costume filtering (http://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customfiltering.htm) suitable for my project, but this doesn’t work as i want. I want something of this form: First Name-> Antoni & Product->Cappuccino this should result in the final grid table. And am using the mysql as the data source. Please help.
Hello rijesh,
Do you wish the filter to be inside or outside the grid? Please check out the other filtering demos in the demo section and also the Filtering tutorial in the Documentation.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I would want the filters to be listed outside the grid. Something similar to customfiltering example.
Hi rijesh,
How about this solution?
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var data = generatedata(500); var source = { localdata: data, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], datatype: "array" }; var addfilter = function (name) { var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = name; var filtercondition = 'contains'; var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter1); // add the filters. $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); } var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 670, source: adapter, theme: theme, filterable: true, sortable: true, autoshowfiltericon: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); var filterSource = new Array(); for (var i = 0; i < adapter.records.length; i++) { var currentName = adapter.records[i].firstname; if (filterSource.indexOf(currentName) == -1) { filterSource.push(currentName); }; }; $("#filterList").jqxDropDownList({ width: 200, source: filterSource }); $("#filterList").on("select", function (event) { var selectedLabel = event.args.item.label; addfilter(selectedLabel); }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> Filter "First Name": <div id="filterList"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.