Provided Filters

This section describes the functionality common to all filters that are provided in the grid.

The grid provides four filters out of the box; three Simple Filters (Text, Number and Date), and an advanced Set Filter which is available in the enterprise version of the grid.

Follow the links below to learn more about each specific filter:

The rest of this section will cover concepts that are common to each provided filter.

Structure of Provided Filters

The diagram below outlines the structure of the filters. Each box represents a filter type with the functions listed in it. For example all provided filters have Apply and Clear button logic. Only the Date filter has a Date Comparator or a Date Picker.

Provided Filter Functions

Provided Filter UI

Each provided filter is displayed in a UI with optional Clear and Apply buttons at the bottom.

Provided Filter Params

All of the provided filters have the following parameters:

Parameter Description
applyButton Set to true to have the filter use an Apply button. If the Apply button is present, then the filter is only applied after the user hits the Apply button.
clearButton Set to true to have the filter use a Clear button. The Clear button will clear the (form) details of the filter without removing any active filters on the column.
resetButton Set to true to have the filter use a Reset button. The Reset button will clear the details of the filter and any active filters on that column.
debounceMs By default the Text and Number will debounce by 500ms. This is because these filters have text field inputs, so time is given to the user to type items in. The Set and Date will execute immediately (no debounce). To override these defaults, set debounceMs to the number of milliseconds to debounce by.
newRowsAction This property is for when using the Client Side Row Model only. If set to 'clear', then setting data into the grid by calling api.setRowData() (or updating the rowData property if bound by a framework) will clear (reset) the filter. If set to 'keep' then the grid will keep it's currently set filter. The default is 'clear', so set to 'keep' if you want to keep filter state before loading new data into the grid.

Provided Filter API

All of the provided filters have the following methods:

Method Description
getModel() Returns the active filter model. If Apply button is used, the model will be the applied model.
getModelFromUi() Returns the filter model from the UI regardless of Apply button pressed or not. If Apply button is used, then the model returned will show the state of the UI rather than what the filter currently has as active.
applyModel() Applies the model (so that getModel() will return what is in the UI when applyModel() was called). Useful when using Set Filter API and making changes to the UI and to have those changes applied.

Apply, Clear and Reset Buttons

Each of the provided filters can optionally include Apply, Clear and Reset buttons.

When the Apply button is active, the filter is only applied after the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if doing server side filtering (thus preventing unnecessary calls to the server).

The Clear button just clears the filters UI whereas the Reset button clears the filters UI and removes any active Filters for that column.

The example below also demonstrates using the apply button. It also demonstrates the relationship between the Apply button and filter events. Note the following:

  • The Athlete and Age columns have filters with Apply and Reset buttons.
  • The Country column has a filter with Apply and Clear buttons.
  • onFilterModified gets called when the filter changes regardless of the apply button.
  • onFilterChanged gets called after a new filter is applied.
  • Looking at the console, it can be noted when a filter is changed, the result of getModel() and getModelFromUi() are different. The first reflects the active filter, the second reflects what is in the UI (and not yet applied).