Blogs

By reading this post, you will learn how to use the jQuery Grid API to filter the Grid data without the UI.
jqxGrid has several methods that allow you to handle the data filtering – addfilter, removefilter, applyfilters and clearfilters. The first method adds a filter to a grid column. The ‘removefilter’ method removes a filter from a grid column. The ‘applyfilters’ method applies all filters to the grid and refreshes its contents. The last method clears the filtering. Let’s see how to add a filter.
1. The first step is to create a filter group. The filter group is a group of one or more filtering criterias.

var filtergroup = new $.jqx.filter();

2. The next step is to create the filters. Each filter must have a filter value – this is the value we compare each cell value with. The filter condition specifies how the filter will compare each cell value with the filter value. The filter condition value depends on the filter’s type(jqxGrid supports string, numeric and date filters). If you want to get the list of the supported grid filtering conditions, you can use the ‘getoperatorsbyfiltertype’ method of filter group.The createfilter method is used to create the filter.

var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

3. The third step is to add the filters to the filter group. In the code example below, we added two filters in the filter group with operator ‘or’. This means that each cell value will be evaluated by filter1 and filter2 and the evaluation result will be true, if the filter1’s returned value is true or filter2’s returned value is true.

var filter_or_operator = 1; 
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);

4. In the final step, we add the filter group to the first column and apply the filters by calling the ‘applyfilters’ method.

// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');

If you want to remove the filter, call the ‘removefilter’ method and then the ‘applyfilters’ method.

$("#jqxgrid").jqxGrid('removefilter', 'firstname');
$("#jqxgrid").jqxGrid('applyfilters');

If you want to clear all filters, use the ‘clearfilters’ method.

$("#jqxgrid").jqxGrid('clearfilters');