KendoReact Data Grid Basic Filtering Overview
The KendoReact Data Grid enables you to display only those Grid records which meet specified criteria.
Start Free Trial
Getting Started with the KendoReact Data Grid Filtering
To enable filtering in the Grid you should:
- Set the
filterableprop of the Grid to render a filter row under the column headers. - Set the
filteroption of the Grid. Filtering conditions are declared asFilterDescriptorsorCompositeFilterDescriptor. - Handle the
onFilterChangeoronDataStateChangeevent of the Grid. - Filter the data on the client using built-in methods like filterBy or
process. The data can also be filtered on the server using event parameters.
The
filterBymethod is recommended foronFilterChangeevent. Theprocessmethod is recommended when using theonDataStateChangeevent.
Each consecutive filter is added to the previous ones and reduces the subset of data.
By default, when filtering is enabled, the Grid renders a filter row in its header. Depending on the data type of each column, the filter row displays filtering components where the user can filter string, numeric, boolean, or date data types.
Filtering Data Grid Rows by Using the filterBy Method
To use the filterBy method set the filter property of the Grid with the current filter expression and handle the onFilterChange.
Filtering Data Grid Rows by Using the process Method
When multiple data operations (filtering, sorting, paging, etc.) are enabled, using the process method and the data state from the onDataStateChange event is the recommended approach.
The Grid allows you to customize the operators for the numeric, text, and date filter types by using the filterOperators property which accepts GridFilterOperators. The Grid uses the first operator from each type as its default operator. The Boolean filter types always use the equal operator.
Filtering Data Grid Through External TextBox
You can use an external TextBox to apply quick filter to the Grid.