# Filtering The Kendo UI for Vue 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](https://www.telerik.com/kendo-vue-ui/components/grid/filtering#using-the-built-in-state-management-for-filtering): The Grid manages its own filtering state internally. * [Controlled Mode](https://www.telerik.com/kendo-vue-ui/components/grid/filtering#using-the-filtering-in-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`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#autoprocessdata) prop to allow the Grid to handle paging automatically. 2. Set the [`filterable`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#filterable) prop of the Grid to render a filter row under the column headers. 3. Set the [`defaultFilter`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#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. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/built-in/source.txt) ## 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`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#filterable) prop of the Grid to render a filter row under the column headers. 2. Set the [`filter`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#filter) option of the Grid. Filtering conditions are declared as [`FilterDescriptors`](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/filterdescriptor) or [`CompositeFilterDescriptor`](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/compositefilterdescriptor). 3. Handle the [`onFilterChange`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#onfilterchange) or [`onDataStateChange`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#ondatastatechange) event of the Grid. 4. Filter the data on the client using built-in methods like [filterBy](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/filterby) or [`process`](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/process). The data can also be filtered on the server using event parameters. > The [`filterBy`](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/filterby) method is recommended for `onFilterChange` event. The [`process`](https://www.telerik.com/kendo-vue-ui/components/dataquery/api/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`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#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`](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#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. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/select-filter-type/source.txt) More details about each filtering option and the custom scenarios that can be applied, you can find on the following links: * [Grid FilterRow examples](https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-row) * [Grid ColumnMenu Filtering examples](https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-menu) ## 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](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops#filter) input property of each column. ### Text Filter The text filter is the default filter type. Its UI is a [`Input`](https://www.telerik.com/kendo-vue-ui/components/inputs/textbox) component. The following example demonstrates how to filter string values using a TextBox component, allowing users to enter a specific text for filtering the Grid data. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/basic/string/source.txt) ### Numeric Filter The numeric filtering UI is a [`NumericTextBox`](https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox) component. The following example demonstrates how to filter numeric values using a NumericTextBox component, allowing users to enter a specific number for filtering the Grid data. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/basic/number/source.txt) ### Date Filter The date filtering UI is the [`DatePicker`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker) component. The following example demonstrates how to filter date values using a DatePicker component, allowing users to select a specific date for filtering the Grid data. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/basic/date/source.txt) ### Boolean Filter The boolean filtering UI utilizes the [`DropDownList`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/dropdownlist) component. The following example demonstrates how to filter boolean values using a DropDownList component, allowing users to select from predefined options such as "True", "False", and "All" for comprehensive boolean data filtering. [Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/basic/boolean/source.txt) ## Suggested Links * [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui/components/grid/api/gridprops) * [API Index of the Grid](https://www.telerik.com/kendo-vue-ui/components/grid/api)