Question

我有一个带有内联编辑选项的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

Answer 1

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

首先，我们需要某种标志来确定该选项必须禁用的位置，以及isDeleted标记false，k-state-disabled会更新。

然后我们需要在html中添加以下部分，这里是魔术发生的地方它给你一个模板，它将决定我们是否必须将isDeleted类添加到选项或取决于{{1的值}}

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

已禁用Kendo Grid Inline Edit with Drop Down选项

1 个答案: