基于网格的列值的Kendo UI网格编辑器

Question

我在Kendo UI文档中找到了这篇文章，它与我坚持的问题几乎相同。 在Dojo中打开后，我将编辑一些代码行，尤其是更改为editable:"inline"模式并为type column创建一个下拉列表。 但是似乎代码无法按我预期的那样工作。

我从下拉列表中更改值type后，为什么Editor列不响应的任何想法。 如果我先进行更新，然后再编辑回网格，则它会起作用。

由于相关情况，在此我提供一个演示

感谢您的帮助。 谢谢

Answer 1

它按预期方式工作，如何编码。 仅在触发编辑事件时才调用列的编辑器。 如果要使编辑器字段根据已处于编辑模式下的类型而动态更改，则必须更新类型编辑器上的kendoDropDownList，以利用change事件来更改另一个编辑器。

function typeEditor(container, options) {
        $('<input id="' + options.field + '" name="type" required dataTextField="type" dataValueField="type" data-bind="value:' + options.field + '"/>')
          .appendTo(container)
          .kendoDropDownList({
            optionLabel: "- Select Type -",
            dataTextField: "settingTypeName", 
            dataValueField:  "settingTypeName", 
            dataSource: settingTypeData,
            change: function(e){
              console.log(this.value());
              //UPDATE EDITOR HERE BASED ON VALUE
              //From your example, value is going to be dropdown, date, string, etc.
            }
        }).data('kendoDropDownList');
}

编辑以回应评论：我不确定您的意思是您无法从下拉列表中获取值。 上面的代码实际上是将值写入控制台。 下一步是选择要更改的元素，将其清空，然后在该位置添加新的编辑器。

...
change: function(e){
    switch(this.value()) {
        ...
        case "string":
            $("[data-container-for=editor]").empty()
            $("<input id='editor' name='editor' type='text' class='k-textbox'>")
              .appendTo($("[data-container-for=editor]"));
            break;
        ...
    }
}