[Solved] disabled items

[Heinrich]

Hi,

Is there a way to mark some items in the dropdown as disabled. I need to show all items, but some items should not be selectable.

Thank you

[Martin Yankov]

Hi Heinrich,

The DropDownList control does not have a built in support for disabled items, but you can easily achieve the scenario by disabling the click event on the desired list items.

Here is a list of the things you need to do:

1. You need a field in your data source that will indicate which items should be disabled and which should be active.
2. You have to create a template for the drop down list items that adds a class to all items that have to be disabled. You can use this class to style the disabled items too.
3. In the DropDownList databound event handler disable the click event for the items with the corresponding class name.

Here is an example you can use for reference:

<div id="dropDownListTemplate" data-win-control="WinJS.Binding.Template">
    <div class="container" data-win-bind="className: Disabled DropDownList.disabledConverter">
        <h6 data-win-bind="innerText: Name"></h6>
    </div>
</div>

<span id="myDropDownList"></span>

 Here is the control declaration with the dataSource in Javascript:

var dropDownList = new Telerik.UI.RadDropDownList(document.getElementById("myDropDownList"), {
    dataSource: [
        { Name: 'Item1', ID: 1, Disabled: false },
        { Name: 'Item2', ID: 2, Disabled: true },
        { Name: 'Item3', ID: 3, Disabled: false }
    ],
    dataTextField: 'Name',
    dataValueField: 'ID',
    ondatabound: function(e) {
        $(".disabled").closest("li").click(false);
    },
    template: document.getElementById("dropDownListTemplate").winControl,
});

 And here is the WinJS.Binding.converter function that you can use to translate a boolean field to a string for the class name.

WinJS.Namespace.define("DropDownList", {
    disabledConverter: WinJS.Binding.converter(function (disabled) {
        return disabled ? "disabled" : "";
    })
});

You can find an example project attached for reference. I hope this solution works for you. Let me know should you have any further questions or need assistance.

Regards,
Martin Yankov
Telerik