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

问题描述：

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

I found this article in the Kendo UI documentation and it's almost identical to my issue that I'm stuck with. Once I open in Dojo I edit some lines of code, especially I change to editable:"inline" mode and make a dropdown list for type column. But it seem the code not working as I expected.

任何想法，为什么我从下拉列表中更改值type后Editor列都没有反应.如果我先进行更新，然后再编辑网格，则该方法有效.

Any idea why Editor column not react after I change the value type from the dropdown list. It worked if I Update first, then Edit back the grid.

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

感谢您的帮助.谢谢

答

它按照预期的方式进行了编码.仅当 edit事件时，才会调用该列的编辑器被触发.如果要使编辑器字段根据已经处于编辑模式下的选择的类型动态更改，则必须在类型编辑器上更新kendoDropDownList才能使用更改事件，然后更改其他编辑器.>

It's working as intended how you have it coded. The editor for the column is only called when the edit event is triggered. If you want the editor field to change dynamically based on the type that you have selected while already in editing mode, you'll have to update the kendoDropDownList on your type editor to make use of the change event to then change the other editor.

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

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

Edit in response to comment: I'm not sure what you mean by you aren't able to get the value from the dropdownlist. The code above is literally writing the value to the console. You're next step would be to select the element that you want to change, empty it, and add a new editor in it's place.

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

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

相关推荐