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:
- Set the filterable and filter options of the Grid.
- 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, set filterCell in the cells option of a column. To apply the same custom filter cell to all columns, set filterCell in the cells prop of the Grid.
The following example uses a named slot for the ProductName filter cell.
Using Switch in Filter Row
The following example uses the Switch component in the Filter Row of the Grid. The custom slot is assigned to cells.filterCell for the Discontinued column.
Using DropDownList in Filter Row
The following example uses the DropDownList component in the Filter Row of the Grid. The custom slot is assigned to cells.filterCell for the Category.CategoryName column.
Using DateRangePicker in Filter Row
The following example uses the DateRangePicker component in the Filter Row of the Grid. The custom slot is assigned to cells.filterCell for the FirstOrderedOn column.