Kendo Grid Inline Edit with Drop Down option disabled

Question

I have a Kendo Grid with inline edit options. I have a dropdown from which user have to select values. I want to disable certain items from the dropdown dynamically. I have to dynamically enable and disable options from dropdown so I store disabled objects in a separate array than source. Here is an example.

columns: [{
            field: "xxxx",
            title: "xxxx",
            template: function (dt) {
                return dt.xxxx;
            },
            editor: function (container, options) {
                $('<input name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        dataTextField: "textField",
                        dataValueField: "ValueField",
                        dataDisabled:arrayOfObjThatShouldBeDisabled,//Don't work I know
                        dataSource: {
                            data: myDataSource // DYNAMIC SOURCE
                        }
                    });
            }
        }]

Here is a sample from Kendo website.

Another Example

Answer 1

As the question revolves closely to this Kendo UI Dojo keeping it base I try to explain what the code is does and how it map to my problem.

First of all we need some kind of flag to identify where the option has to be disable or not for that introduce isDeleted flag with false , will update accordingly.

Then we need to add following section in html, here is where the magic happens it gives you a template which will decide either we have to add k-state-disabled class to option or not depending upon the value of isDeleted .

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

With that I have to made minor changes to code as follows and it worked

$('<input name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        dataSource: {
                        data: myDataSource // DYNAMIC SOURCE
                        },
                        dataTextField: "textField",
                        dataValueField: "ValueField",
                        select: function (e) {
                            if (e.dataItem.isDeleted) {
                                e.preventDefault();
                            }
                        },
                        template: kendo.template($("#template").html())
                    });