且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-02 23:32:30

它按照预期的方式进行了编码.仅当 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;
        ...
    }
}