Selecting All Checkboxes in the MultiSelect

Environment

Product

Progress® Kendo UI for Angular MultiSelect

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.

html

    <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.

ts

    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.

Change Theme

Theme

Loading ...