KendoReact Data Grid Filtering Overview

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

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. Each consecutive filter is added to the previous ones and reduces the subset of data.

Enabling Filtering

The KendoReact Grid supports filtering in two modes:

• Built-in State Management: The Grid manages its own filtering state internally.

• Controlled Mode: The filtering state is externally managed by handling events and updating the state accordingly.

Using the Built-in State Management for Filtering

To enable filtering using the built-in state management mechanism, follow these steps:

1. Enable the autoProcessData prop to allow the Grid to handle paging automatically.
2. Set the filterable prop of the Grid to render a filter row under the column headers.
3. Set the defaultFilter prop to set initial filtering for the Grid.

The following example demonstrates how to implement filtering using the built-in state management of the KendoReact Grid.

Using the Filtering in Controlled Mode

To enable numeric paging in the KendoReact Grid and use it in controlled mode, follow these steps:

1. Set the filterable prop of the Grid to render a filter row under the column headers.
2. Set the filter option of the Grid. Filtering conditions are declared as FilterDescriptors or CompositeFilterDescriptor.
3. Handle the onFilterChange or onDataStateChange event of the Grid.
4. 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 for onFilterChange event. The process method is recommended when using the onDataStateChange event.

Customizing the Filter Operators

The Grid allows you also 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.

KendoReact Data Grid Filtering APIs

• FilterDescriptors
• onDataStateChange
• API Reference of the Grid

Suggested Links

• React Grid Advanced Filtering
• React Data Grid High-Level Overview