# Vue Grid Global Filtering

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:

1. Enable the [`autoProcessData`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#autoprocessdata) prop to allow the Grid to handle filtering automatically.
2. Add the [`GridSearchBox`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridsearchbox) component to provide a global search input.
3. (Optional) Set the [`defaultSearch`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/global-filtering/built-in/source.txt)

### 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:

1. Add the [`GridSearchBox`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridsearchbox) component to provide a global search input.
2. Define the [`search`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#filter) prop with filter conditions as [`FilterDescriptor`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/filterdescriptor) or [`CompositeFilterDescriptor`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/compositefilterdescriptor).
3. Handle the [`searchchange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onsearchchange) event to update the filter state.
4. Process the data using the [`filterBy`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/global-filtering/controlled/source.txt)

### Controlled Filtering with Initial Filter

You can pre-populate both the `search` and `filter` state when the Grid first renders.

The following example initializes the search box with a value of `"an"` and the column filter with a value of `"Cha"`, so the Grid loads with both active simultaneously.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/global-filtering/controlled-with-filter/source.txt)

## Suggested Links

* [Vue Data Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid)
* [Filter Row](https://www.telerik.com/kendo-vue-ui-develop/components/grid/filtering/filter-row)
* [ColumnMenu Filtering](https://www.telerik.com/kendo-vue-ui-develop/components/grid/filtering/filter-menu)
* [External Filtering](https://www.telerik.com/kendo-vue-ui-develop/components/grid/filtering/external-filtering)
* [Vue Data Grid High-Level Overview](https://www.telerik.com/kendo-vue-ui/grid)