已禁用Kendo Grid Inline Edit with Drop Down选项 [英] Kendo Grid Inline Edit with Drop Down option disabled

问题描述

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

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

这是示例。

另一个例子

推荐答案

由于问题与这个Kendo UI Dojo 保持它的基础我试着解释代码的作用以及它如何映射到我的问题。

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.

首先，我们需要某种标志来识别选项必须禁用的位置，或者不要引用 isDeleted 标记 false ，会相应更新。

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

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

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

这篇关于已禁用Kendo Grid Inline Edit with Drop Down选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！