Select All
The Kendo UI for Vue MultiSelect provides a built-in Select all option that allows users to toggle all currently applicable items with a single interaction. This article covers the following scenarios:
Basic Usage
To enable the select all functionality, set the selectAll property to true. This renders a sticky "Select all" item at the top of the popup list. Clicking it selects all non-disabled items in the list; clicking it again deselects them.
Checkboxes
To render checkboxes next to the select-all header and each list item, set the checkboxes property to true. The checkbox state reflects the current selection—fully checked when all items are selected, indeterminate when some are selected, and unchecked when none are selected.
Summary Tags
When many items are selected, the MultiSelect can collapse tag chips into a summary. Use the summarizeAfter property to specify how many individual tags to show before displaying a summary tag with the remaining count.
Controlled Select All
For scenarios where the MultiSelect shows grouped or filtered data, use the selectallchange event to take over the select-all logic. Call event.preventDefault() inside the handler to skip the built-in toggle and apply your own selection logic instead, giving you full control over which items get selected.
The following example demonstrates using the selectallchange event with filtering, grouping, and custom values.