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

Filtering

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

Filter Options

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

OptionSetupDescription
Filter rowSet the filterable option to trueFilter controls are rendered below each column header cell. The data is filtered automatically once the user stop typing.
ColumnMenu FilteringSet 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.

Example
View Source
Change Theme:

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

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.

Example
View Source
Change Theme:

Numeric Filter

The numeric filtering UI is a NumericTextBox component.

Example
View Source
Change Theme:

Date Filter

The date filtering UI is the DatePicker component.

Example
View Source
Change Theme:

Boolean Filter

The boolean filtering UI utilizes the DropDownList component.

Example
View Source
Change Theme: