KendoReact Data Grid Basic Filtering Overview

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

ninja-iconThe Filtering is part of KendoReact, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Getting Started with the KendoReact Data Grid Filtering

To enable filtering in the Grid you should:

  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.

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Filtering Data Grid Through External TextBox

You can use an external TextBox to apply quick filter to the Grid.

Change Theme
Theme
Loading ...

KendoReact Data Grid Filtering APIs