Angular Grid Multi-Checkbox Menu Filtering
The Angular Grid provides a built-in multi-checkbox filter menu that enables you to filter data by selecting multiple values from a list of unique column values. Similar to Excel filtering, this filter type renders checkboxes for each distinct value in the column, making it easy to include or exclude multiple items at once.
The following example demonstrates the multi-checkbox filter menu in action.
Enabling the Multi-Checkbox Filter
To enable the multi-checkbox filter menu, set the column's filterVariant property to 'multiCheckbox'. The Grid must also have filter menu mode enabled by setting filterable to 'menu'.
The multi-checkbox filter automatically extracts and displays unique values from the column data. It includes a search input that allows you to quickly find specific values in the list.
<kendo-grid [kendoGridBinding]="gridData" filterable="menu">
<kendo-grid-column
field="ProductName"
title="Product Name"
filterVariant="multiCheckbox">
</kendo-grid-column>
</kendo-grid>Configuration Options
You can configure the multi-checkbox filter by passing a FilterVariantSettings object to the filterVariant property.
Custom Filter Data
By default, the multi-checkbox filter displays unique values from the Grid's data. To provide a custom set of values, use the data option. This is useful when you want to show a predefined list of filter options or limit the available choices.
The following example demonstrates how to provide custom filter data.
Search Input
The search input is displayed by default, allowing users to filter the checkbox list. To hide the search input, set the search option to false.
The following example demonstrates how to disable the search input.
Unique Values and Formatting
The multi-checkbox filter displays only unique values from the data set. If multiple rows contain the same value, that value appears only once in the filter list, not repeated for each occurrence. This applies to all data types including strings, numbers, dates, and booleans.
When a column has a format specified, the filter displays the formatted values. This ensures that users see the same representation of data in both the filter and the Grid cells. For example, if a date column uses a format like {0:dd/MM/yyyy}, the multi-checkbox filter displays dates in that format.
The following example demonstrates how the filter renders unique values and applies column formatting.