KendoReact Data Grid Basic Filtering Overview
The KendoReact Data Grid enables you to display only those Grid records which meet specified criteria.
Getting Started with the KendoReact Data Grid Filtering
To enable filtering in the Grid you should:
- Set the
filterable
prop of the Grid to render a filter row under the column headers. - Set the
filter
option of the Grid. Filtering conditions are declared asFilterDescriptors
orCompositeFilterDescriptor
. - Handle the
onFilterChange
oronDataStateChange
event 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
filterBy
method is recommended foronFilterChange
event. Theprocess
method is recommended when using theonDataStateChange
event.
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.