Select All
The KendoReact 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 advanced scenarios such as virtualization where the MultiSelect only receives a page of data at a time, use the onSelectAllChange event to delegate the select-all logic to the consumer. When onSelectAllChange is provided, the component fires the event instead of performing the built-in toggle, giving you full control over which items get selected.
The following example demonstrates using onSelectAllChange with virtual scrolling, filtering, grouping, and custom values.