禁用下拉选项的剑道网格内联编辑 [英] Kendo Grid Inline Edit with Drop Down option disabled

问题描述

我有一个带有内联编辑选项的剑道网格.我有一个下拉列表，用户必须从中选择值.我想动态禁用下拉列表中的某些项目.我必须从下拉列表中动态启用和禁用选项，因此我将禁用的对象存储在与源不同的数组中.这里是一个例子.

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 网站的示例.

Here is a sample from Kendo website.

另一个例子

推荐答案

由于问题与 这个 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())
                    });

这篇关于禁用下拉选项的剑道网格内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！