New to Kendo UI for Vue? Start a free 30-day trial

Kendo UI for Vue Data Grid Global Filtering

Updated on Feb 9, 2026

The Kendo UI for Vue Data Grid provides flexible global filtering capabilities that allow you to display only those Grid records which meet specified criteria. Global filtering can be implemented using either built-in state management or controlled mode, giving you full control over the filtering behavior.

Filtering Modes

The Grid supports two primary filtering 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 Built-in State Management for Filtering

The built-in state management approach is the simplest way to enable filtering in the Grid. The Grid automatically handles the filtering logic and state updates.

Enabling Built-in Filtering

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

Enable the autoProcessData prop to allow the Grid to handle filtering automatically.
Add the GridSearchBox component to provide a global search input.
(Optional) Set the defaultSearch prop to apply initial filtering to 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 ...

Key Features of Built-in Mode

Automatic handling of filter state
No need to manually process data
Simplified implementation
Supports default filter configuration

Using Controlled Mode for Filtering

Controlled mode gives you complete control over the filtering state, allowing you to implement custom filtering logic, integrate with external state management, or handle server-side filtering.

Enabling Controlled Filtering

To enable filtering in controlled mode, follow these steps:

Add the GridSearchBox component to provide a global search input.
Define the search prop with filter conditions as FilterDescriptor or CompositeFilterDescriptor.
Handle the searchchange event to update the filter state.
Process the data using the filterBy method from @progress/kendo-data-query.

Controlled Filtering with FilterBy

The following example demonstrates controlled filtering using the filterBy method to manually filter the data when the filter state changes.

Change Theme

Theme

Loading ...

Controlled Filtering with Initial Filter

You can also set an initial filter state in controlled mode to display pre-filtered data when the Grid loads.

Change Theme

Theme

Loading ...