ColumnMenu Filtering
One of the filtering options provided by the Kendo UI for Vue Native Grid is through its column menu. More details about the way the column menu can be initialized, can be found on this Column Menu documentation.
The current article discusses how the column menu can be modified in a way we can better utilize its filtering functionality.
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 accordingly.
To access all demo files, refer to the tree pane of the file.
