javascript – 禁用了Kendo Grid Inline Edit with Drop Down选项

我有一个带有内联编辑选项的Kendo Grid.我有一个用户必须选择值的下拉列表.我想动态地从下拉列表中禁用某些项目.我必须从下拉列表动态启用和禁用选项,因此我将禁用的对象存储在一个单独的数组而不是源中. Here就是一个例子.

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
                        }
                    });
            }
        }]

这是来自剑道网站的sample.

Another Example

解决方法:

由于问题与this Kendo UI Dojo紧密相关,因此我会尝试解释代码的作用以及它如何映射到我的问题.

首先,我们需要某种标志来标识选项必须禁用的位置,否则引入isDeletedflag为false,将相应地更新.

然后我们需要在html中添加以下部分,这里是魔术发生的地方它给你一个模板,它将决定我们是否必须根据isDeleted的值添加k-state-disabled类到选项.

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

有了这个,我必须对代码进行如下微小的更改,并且它有效

$('<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())
                    });

标签：javascript,kendo-ui,kendo-grid
来源： https://codeday.me/bug/20191003/1850184.html