Filtering

Updated on Feb 9, 2026

The Kendo UI for Vue Native Data Grid provides diverse filtering options for displaying Grid records which meet specified criteria.

Enabling Filtering

The Kendo UI for Vue 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 Kendo UI for Vue Grid.

Change Theme

Theme

Loading ...

Using the Filtering in Controlled Mode

To enable numeric paging in the Kendo UI for Vue 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.

Filter Options

The Grid data can be filtered using one of the following options:

Option	Setup	Description
Filter row	Set the filterable option to true	Filter controls are rendered below each column header cell. The data is filtered automatically once the user stop typing.
ColumnMenu Filtering	Set the columnMenu option to true.	A menu icon displays inside the column header. The data can be filtered when the user make a selection in the Filter popup of the column menu.

The following example demonstrates the available filter modes of the Grid.

Change Theme

Theme

Loading ...

More details about each filtering option and the custom scenarios that can be applied, you can find on the following links:

• Grid FilterRow examples
• Grid ColumnMenu Filtering examples

Filter Data Types

In its column filters, the Grid provides a built-in filtering UI for all basic data types (string, number, Date, boolean). You can set the filtering UI type through the filter input property of each column.

Text Filter

The text filter is the default filter type. Its UI is a Input component.

Change Theme

Theme

Loading ...

Numeric Filter

The numeric filtering UI is a NumericTextBox component.

Change Theme

Theme

Loading ...

Date Filter

The date filtering UI is the DatePicker component.

Change Theme

Theme

Loading ...

Boolean Filter

The boolean filtering UI utilizes the DropDownList component.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Grid
• API Index of the Grid