Disabled Items

The MultiSelect allows you to disable some of its options and prevent the user from interacting with them.

The following example demonstrates how to disable specific list options by using the itemDisabled property when the MultiSelect is bound to primitive data.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-multiselect
            [placeholder]="'Select item...'"
            [itemDisabled]="itemDisabled"
            [data]="listItems"
        >
        </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];

    public itemDisabled(itemArgs: { dataItem: string, index: number }) {
        return itemArgs.index == 2; //disable the 3rd item
    }
}

The following example demonstrates how to disable specific list options by using the itemDisabled property when the MultiSelect is bound to complex data.

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect
        [placeholder]="'Select item...'"
        [itemDisabled]="itemDisabled"
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
    >
    </kendo-multiselect>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number, inStock: boolean }> = [
        { text: "XS", value: 1, inStock: false },
        { text: "S", value: 2, inStock: true },
        { text: "M", value: 3, inStock: false },
        { text: "L", value: 4, inStock: true },
        { text: "XL", value: 5, inStock: false }
    ];

    public itemDisabled(itemArgs: { dataItem: any, index: number }): boolean {
        return !itemArgs.dataItem.inStock;
    }
}

In this article