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

Example
    <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 #
    </span>
    </script>
    <script>
      $("#dropdownlist").kendoDropDownList({
        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){
          if(e.dataItem.isDeleted){
            e.preventDefault();
          }
        },
        template: kendo.template($("#template").html())
      });

      $(".k-button").click(function(){
        var dropdown = $("#dropdownlist").data("kendoDropDownList");
        var oranges = dropdown.dataSource.get(2);
        oranges.set("isDeleted", true);
      })
    </script>

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 the information

close
Dummy