Disable DropDownList Items for Selection

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I display list items in the Kendo UI for jQuery DropDownList as inactive?

Solution

A possible approach to make items appear as disabled is to apply the k-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-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

• JavaScript API Reference of the DropDownList
• Automatically Adjust the Width of a DropDownList
• Create DropDownLists with Long Items
• Detect Wrapper Focus Events
• Move the Group Label on Top of Items
• Prevent Popup Closure on Scroll
• Remove Items
• Set DataSource Dynamically
• Update MVVM Bound Models on Load