ColumnMenu Filtering
One of the filtering options provided by the Kendo UI for Vue Native Grid is through its column menu. The Column Menu documentation provides more details about how to initialize it.
The current article discusses how to modify the column menu to use its filtering functionality in an efficient manner.
Display Filtering Functionality with Custom Icon
The below example shows how to change the column menu icon and display only the filtering functionality of the menu.
Checkbox Filter
The ColumnMenu provides the GridColumnMenuCheckboxFilter component, which provides a checkbox list to filter the column data.
The following example demonstrates how to setup the checkbox filtering:
Customizing the Filter Component
The filter component of the column menu enables you to customize its user interface (UI) by passing a custom component to the columnMenu property.
You can integrate custom components in the column menu and pass additional properties to them.
The following example demonstrates how to:
- Render the columns inside the column menu based on an array of the column names and on the column
hiddenproperty. - Hide columns from the column menu and enable the Grid to update the column menu.
To access all demo files, refer to the tree pane of the file.