Filtering

The KendoReact Data Grid enables you to display only those Grid records which meet specified criteria.

The Grid Package is part of KendoReact, a professionally built commercial UI library. To try out this Grid you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.


Getting Started

To enable filtering:

  1. Set the filterable prop of the Grid which will render a filter row under the column headers.
  2. Set the filter option of the Grid. The filtering conditions are declared as FilterDescriptors or CompositeFilterDescriptor.
  3. Handle the onFilterChange or the onDataStateChange event of the Grid. The onDataStateChange event is recommended when the Grid will have other data operations as it provides the complete dataState in a single event.
  4. Filter the data on the client by using our built-in methods filterBy or process. The data can also be filtered on the server by making a request using the event parameters.

The filterBy method is recommended when using the onFilterChange event and the process method is recommended when using the onDataStateChange event.

Each consecutive filter is added to the previous ones and reduces the subset of data.

Filter Rows

By default, when filtering is enabled, the Grid renders a filter row in its header. Based on the type of data the columns contain, the filter row displays filtering components in each column header where the user can filter string, numeric, boolean, or date data types.

Example
View Source
Edit In Stackblitz  
Change Theme:

Column Menu Filter

The columnMenu allows using the GridColumnMenuFilter or the GridColumnMenuCheckboxFilter component to filter the Grid. This provides menu like filtering functionality inside a popup container for the column.

This example showcase how to filter a column using the columnMenu.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Filter Cells

The filterCell property of the GridColumn enables the full customization of the filter cells.

The following example demonstrates how to implement a KendoReact DropDownList component for filtering the products by category and price range.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Filter Operators

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

The Grid Package is part of KendoReact, a professionally built commercial UI library. To try out this Grid you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.