Как обновить выпадающий список в Kendo Grid Editor

Question

Я недавно использую Kendo UI для JQuery,

У меня есть kendoGrid, и я пытаюсь редактировать строки. Я использую всплывающий редактор. Один из столбцов в строке представляет собой раскрывающийся список, и он должен быть различным для каждой строки. Я написал метод в моем контроллере, чтобы фактически получить новый выпадающий список на основе переданных параметров. Я не могу перезагрузить выпадающий список для каждой строки. Он выполняется только один раз.

Пожалуйста, найдите код ниже.

    $("#test").kendoGrid({
                        dataSource: entriesDataSource,
                        pageable: true,
                        sortable: true,
                        selectable: "single row",
                        columns: [
                            {
                                field: "RequiredText",
                                title: "Required Text",
                                editor: singleSelectRequiredTextEditor
                            },
                                { command: ["edit"], title: " " },
                        ],
                        editable: "popup"
                    });
                };


    var singleSelectRequiredTextEditor = function (container, options) {
                    $('<input data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            suggest: true,
                            dataSource: getRequiredTextList,
                        });
                };

    var getRequiredTextList = new kendo.data.DataSource({
        transport: {
            read: {
                url: $.getActionUrl('GetRequiredTextList'),
                dataType: "json",
                data: function () {
                    return {
                        param1: sname,
                        param2: rname
                    };
                }
            }
        }
    });

Любая помощь будет оценена. Спасибо.

Answer 1

Я предлагаю добавить событие редактирования сетки , а затем проверить, является ли редактируемый столбец столбцом с раскрывающимся списком, используя e.container.cellIndex и обновляя раскрывающийся список..

edit: function(e) {
     if (e.container.cellIndex == 1) 
     {                                               
       e.container.find("input[name=Category]")
        .data("kendoDropDownList").refresh();
     }
},

Answer 2

Вы можете захотеть перехватить событие редактирования в сетке, чтобы проверить, является ли это выпадающим списком, затем выполнить обновление источника данных и вызвать всплывающий список. Пример ниже:

$("#test").kendoGrid({
                        dataSource: entriesDataSource,
                        pageable: true,
                        sortable: true,
                        selectable: "single row",
                        columns: [
                            {
                                field: "RequiredText",
                                title: "Required Text",
                                editor: singleSelectRequiredTextEditor
                            },
                                { command: ["edit"], title: " " },
                        ],
                        editable: "popup",
                        edit: function(e){
                            var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
                            if(ddl){ 
                                ddl.dataSource.read();
                                ddl.open(); 
                            }
                        }
                    });

При повторном извлечении источника данных в раскрывающемся списке вы можете установить для параметра кэширования значение false. Смотрите пример ниже:

var getRequiredTextList = new kendo.data.DataSource({
        transport: {
            read: {
                url: $.getActionUrl('GetRequiredTextList'),
                cache:false,
                dataType: "json",
                data: function () {
                    return {
                        param1: sname,
                        param2: rname
                    };
                }
            }
        }
    });