Edit this page

Disable Items for Selection

The Kendo UI DropDownList provides an option for displaying list items as non-active.

A possible approach to make items appear as disabled is to apply the k-state-disabled CSS class in a Kendo UI Template.

To prevent the future selection of disabled items, add an event handler to the select event and call e.preventDefault().

    <input id="dropdownlist" /> <button class="k-button"> Mark Oranges as deleted</button>
    <script id="template" type="text/x-kendo-template">
    <span class="#: isDeleted ? 'k-state-disabled': ''#">
       #: name #
        dataSource: [
          { id: 1, name: "Apples", isDeleted: false},
          { id: 3, name: "Mangoes", isDeleted: false},
          { id: 2, name: "Oranges" , isDeleted: false}
        dataTextField: "name",
        dataValueField: "id",
        select: function(e){
        template: kendo.template($("#template").html())

        var dropdown = $("#dropdownlist").data("kendoDropDownList");
        var oranges = dropdown.dataSource.get(2);
        oranges.set("isDeleted", true);

See Also

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article