Disable MultiSelect Options

Environment

Product

Progress® Kendo UI® MultiSelect for jQuery

Description

How can I disable items in the MultiSelect while the drop-down list remains open?

Solution

To prevent the selection, cancel the select event. To prevent the drop-down list from closing, set the autoClose property.

<select id="select"></select>

<script>
    $(document).ready(function() {
        function onSelect(e) {
              if(e.dataItem.unselectableItem)
              {
                //prevent selection by cancelling the event
                e.preventDefault();
                //prevent closing by setting the autoClose property
                // https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/autoclose
                this.setOptions({autoClose: false});
              }
              else {
                this.setOptions({autoClose: true});
              }
        };

        var data = [
            { text: "Disabled", value:"1", unselectableItem: true },
            { text: "Enabled", value:"2", unselectableItem: false }
        ];

        $("#select").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            select: onSelect,
            // Set a template to visually distinguish disabled items for the user.
            template: kendo.template($("#template").html())
        });
    });
</script>

<script id="template" type="text/x-kendo-template">
    <span class="#: unselectableItem ? 'k-disabled': ''#">
     #: text #
    </span>
</script>