Selecting All Checkboxes in the MultiSelect

Environment

Description

How can I select all items in the MultiSelect component.

Solution

Add a custom select-all checkbox at the top of the list using the header template of the MultiSelect component.

Copy Code    <ng-template kendoMultiSelectHeaderTemplate>
        <input
            type="checkbox"
            id="chk"
            kendoCheckBox
            [checked]="isChecked"
            [indeterminate]="isIndet"
            (click)="onClick()"
        />
        <kendo-label for="chk">Select all</kendo-label>
    </ng-template>

To select or deselect all options, manually update the MultiSelect value.

Copy Code    public onClick() {
        this.isChecked = !this.isChecked;
        this.value = this.isChecked ? this.listItems.slice() : [];
    }

To update the Select all checkbox state:

1. Control the checked state of the checkbox by using the checked property.
2. Control the indeterminate state of the checkbox by using the indeterminate property.

The following example demonstrates the full implementation of the suggested approach.