如何在 Kendo Grid Editor 中刷新下拉列表

Question

我是使用 JQuery 的 Kendo UI 的新手，

我有一个 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，然后使用e.container.cellIndex 和refreshing 下拉检查正在编辑的列是否是带有下拉列表的列。

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