KendoReact Data Grid Advanced FilteringPremium
The KendoReact Data Grid provides powerful filtering options, including column menu filtering, external filters, custom filter operations, and multi-column filtering.
Start Free Trial
Filtering Data Grid Through Column Menu Filter
The columnMenu allows using the GridColumnMenuFilter or the GridColumnMenuCheckboxFilter to filter the Grid through a popup menu.
Filtering Data Grid Through External Filter
You can use the KendoReact Filter component to build complex filter expressions and filter the data inside the Grid.
Filtering Data Grid Through Custom Filter Cells
The filterCell property of the GridColumn enables full customization of the filter cells. The following example demonstrates filtering by category and price range using a DropDownList.
Filtering Data Grid Through External TextBox
You can use an external TextBox to apply quick filter to the Grid.
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.
Define Custom Filter Operators
Customize the filter operators for numeric, text, and date filter types using the filterOperators property. Boolean filter types always use the equal operator.