Grid Filtering

To enable the filtering feature, you need to set the 'filterable' property to true. When the value of the filterable property is true, the Grid displays a filtering panel in the columns popup menus. 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 'emovefilter' 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.


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.


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.


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


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


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


Custom Filter Conditions

To customzie the filter conditions, you need to do the following:
1. Update the Localization Strings. The filter conditions displayed in the filter dropdowns are loaded from the jqxGrid's localization object.
*Use the Grid's "ready" callback or bind to the "bindingcomplete" event before the Grid's initialization.


2. The second step is to update the conditions within the Filter object. In order to achieve that, you need to add a function called "updatefilterconditions". That function is invoked by jqxGrid with 2 parameters - the type of the filter and the default filter conditions. As a result, the function should return an array of strings depending on the filter's type. That array will be used by the filter object.



Add filters to multiple columns through the API

app.component.html
app.component.ts

By default the filter groups are combined with 'AND' operator. That means that the Grid will display records if they meet the criteria of the filter group applied to column 1 and the filter group applied to column 2, etc. You can create any combination of filter groups using 'AND' and 'OR'.
The example below illustrates how:

app.component.html
app.component.ts Using the above code, jqxGrid will display any record which meets at least one of the filtering criterias i.e a record is displayed, if it meets the condition of the 'FirstName' column's filter group or the one of the 'Quantity' column's filter group.