Disabled Items

The DropDownList 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 DropDownList is bound to primitive data.

Example
View Source
Edit In Stackblitz  
Change Theme:

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist
        [defaultItem]="defaultItem"
        [itemDisabled]="itemDisabled"
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
    >
    </kendo-dropdownlist>
  `
})
class AppComponent {
    public defaultItem: { text: string, value: number } = { text: "Select size...", value: null };

    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 }) {
        return !itemArgs.dataItem.inStock;
    }
}

In this article

Not finding the help you need?