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

Filter row

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

Getting Started

To enable filtering:

  1. Set the filterable and filter options of the Grid.
  2. Handle the filterchange event of the Grid, and filter the data manually by applying the filter from the argument of the event.

Filter Row

By default, when filtering is enabled, the Grid renders a filter row in its column headers. Based on the type of data the columns contain, the filter row displays textboxes in each column header where the user can filter string, numeric, or date inputs.

Example
View Source
Change Theme:

Customizing the Filter Row

To render a custom filter cell in the Grid, use templates. To display a filter template in the header of the Grid columns, use any of the following approaches:

  • Using slots, as demonstrated by the filterSlotTemplate in the following example.
  • Using the render function, as demonstrated by the filterRender function in the following example.
Example
View Source
Change Theme:

Using Switch in Filter Row

The below example shows how to use the Switch component in the Filter Row of the Grid. The example uses a custom slot template that is passed to the the filterCell property of the Discontinued column.

Example
View Source
Change Theme:

Using DropDownList in Filter Row

The below example shows how to use the DropDownList component in the Filter Row of the Grid. The example uses a custom slot template that is passed to the the filterCell property of the Category.CategoryName column.

Example
View Source
Change Theme:

Using DateRangePicker in Filter Row

The below example shows how to use the DateRangePicker component in the Filter Row of the Grid. The example uses a custom slot template that is passed to the the filterCell property of the FirstOrderedOn column.

Example
View Source
Change Theme: