Filter row

The Kendo UI for Vue Native Grid 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.

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.

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 filterCell property of the Discontinued column.

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 filterCell property of the Category.CategoryName column.

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 filterCell property of the FirstOrderedOn column.

Suggested Links

• API Reference of the Grid
• API Index of the Grid