如何在 Kendo 网格编辑器中刷新下拉列表

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

您可能想要捕捉网格上的编辑事件以检查它是否是下拉列表，然后重新获取数据源并触发下拉列表弹出。示例如下：

$("#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
                    };
                }
            }
        }
    });

Answer 2

我建议添加 grid edit event then checking if the column being edited is the one with the dropdown by using the e.container.cellIndex and refreshing 下拉菜单。

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