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

Question

我找到了这个 article in the Kendo UI documentation这几乎与我遇到的问题相同。在 Dojo 中打开后，我编辑了一些代码行，特别是我更改为 editable:"inline" 模式并为 type 列制作了一个下拉列表。但似乎代码没有按我预期的那样工作。

知道为什么在我更改下拉列表中的值 type 后 Editor 列没有反应。如果我先更新，然后再编辑网格，它就会起作用。

Here I provide a Demo due to related situation

感谢您的帮助。谢谢

Answer 1

它按照您的编码方式正常工作。专栏的编辑器仅在 edit event 时被调用。被触发。如果您希望编辑器字段根据您选择的类型动态更改同时已经处于编辑模式，您将必须更新类型编辑器上的 kendoDropDownList 以使用 change event然后更改其他编辑器。

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;
        ...
    }
}