Kendo UI Grid Editors Based on the Column Values of the Grid

Question

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.

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.

Here I provide a Demo due to related situation

Appreciate your help. Thanks

Answer 1

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