Disabling KendoUI drop down list options

Question

How to disable an option of a kendoiu drop down list?
I couldn't find how to accomplish this in their documentation...

Answer 1

Try the following approach (here and here there are some demos): use a template for your items, which conditionally adds a class to the items to be disabled. The info about which items should be disabled comes from the underlying data objects.

HTML:

<script id="template" type="text/x-kendo-tmpl">
    #
    if (data.disabled != null) {# 
    <span class="tbd" > ${data.text} - is disabled </span> 
    # } else { #
    <span>${data.text}</span > #
    }#
</script>
<input id="color" value="1" />

jQuery and Kendo UI (note here the disabled extra property for the Orange item and the usage of the dataBound event):

var data = [{
    text: "Black",
    value: "1"
}, {
    text: "Orange",
    value: "2",
    disabled: "disabled"
}, {
    text: "Grey",
    value: "3"
}];

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,
    template: kendo.template($("#template").html()),
    dataBound: function (e) {
        $(".tbd").parent().click(false);
    }
});

CSS for graying out:

.tbd{
   color:#777777
}

Answer 2

While the accepted answer will prevent a click on the item, it still allows keyboard navigation (and feels pretty hackish).

Using the DataItems to identify which item should be disabled is indeed the way to go, but instead of removing the click handler, it is simpler to implement a Select handler that will stops the chain. This method is supported and documented by Kendo :

Fired when an item from the popup is selected by the user either with mouse/tap or with keyboard navigation.

...

e.preventDefault Function

If invoked prevents the select action. The widget will retain the previous selected item.

All that remains is to detect if we want to cancel the selection or not, which is trivial if your data item keeps a property that identifies whether it is available or not :

function Select(e) {
    if (e.sender.dataItem(e.item).disabled) {
        e.preventDefault();
    }
}

Using a template to inject a specific class is not needed, but I would still recommend it if only to enable a proper styling.

Answer 3

Based on the question here, you could access the relevant item and change attributes like so:

var ds = $('#YourCombo').data().kendoComboBox.dataSource;

//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");

Answer 4

Kendo currently doesn't support such functionality but this is easiest hack I found to disable an option in Kendo Dropdown.

$("#" + id + "_listbox .k-item")[index].disabled = true;

where id -> ID of your dropdown
index -> position of the element in the dropdown you want to disable.

Hope it helps. Enjoy :)