This section describes the functionality common to all filters that are provided by 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 every 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 button logic, but only the Date filter has a Date Comparator or a Date Picker.
Provided Filter UI
Each provided filter is displayed in a UI with optional buttons at the bottom.
Provided Filter Params
All of the provided filters have the following parameters:
|Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are: |
|If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to |
|By default the Text and Number filters 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 |
|This property is for when using the Client Side Row Model only. When set to |
Provided Filter API
All of the provided filters have the following methods:
|Applies the model shown in the UI (so that |
|Returns the filter model that is currently applied to the grid.|
|Returns the filter model from the UI. If changes have been made to the UI but not yet applied, this model will reflect those changes.|
|Sets the state of the filter using the supplied model and calls |
Apply, Clear, Reset and Cancel Buttons
Each of the provided filters can optionally include Apply, Clear, Reset and Cancel buttons.
When the Apply button is used, the filter is only applied once the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if using server-side filtering (thus preventing unnecessary calls to the server).
The Clear button clears just the filter UI, whereas the Reset button clears the filter UI and removes any active filters for that column.
The Cancel button will discard any changes that have been made in the UI, restoring the state of the filter to match the applied model.
The buttons will be displayed in the order they are specified in the
The example below demonstrates using the different buttons. It also demonstrates the relationship between the buttons and filter events. Note the following:
- The Athlete and Age columns have filters with Apply and Reset buttons, but different orders.
- The Country column has a filter with Apply and Clear buttons.
- The Year column has a filter with Apply and Cancel buttons.
The Age and Year columns have
true, so the filter popup will be closed immediately when the filter is applied, reset or cancelled.
onFilterModifiedis called when the filter changes regardless of whether the Apply button is present.
onFilterChangedis called only after a new filter is applied.
- Looking at the console, it can be noted when a filter is changed, the result of
getModelFromUi()are different. The first reflects the active filter, while the second reflects what is in the UI (and not yet applied).