The Kendo UI Grid wrapper for Vue provides options for filtering the data it displays.
To configure the filtering functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.
You can enable the filter row in the header of the Grid by setting
filterable-mode property to
row. As a result and based on the data type of the underlying column data, the Grid renders textboxes for string values or numeric inputs, or date pickers in the column headers for data filtering.
To specify the default filter operator which will be applied when the user enters a value in the filter textbox and presses
Tab on the keyboard, set the
filterable-cell attribute of the corresponding column to
You can enable the checkbox filtering in the filter menu by setting
true for the desired Kendo UI Data Grid wrapper for Vue columns.
You can also combine the checkbox filter with the
itemTemplate definition as demonstrated with the Country column in the second Grid in the following example. In this way, you can customize the items with checkboxes which will be visualized and available for selection to the end user.
The following example demonstrates how to set the client operations.
The following example demonstrates how to set the server operations.
The following example demonstrates how to apply common settings to the filter menu of the Kendo UI Grid wrapper for Vue and customize its UI per column by using the exposed API for the column menu.
- Specifies a single-filter criterion by using the
- Limits the filter operators for string columns to
- Defines the UI of the built-in date picker to filter the DateTime column of the Grid.
filterable->uiproperty of the corresponding column.