New to Kendo UI for jQuery? Download free 30-day trial

Disable DropDownList Items for Selection


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


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


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 #
        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

In this article