基於網格的列值的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;
        ...
    }
}