另一个下拉列表的事件更改后刷新剑道下拉列表

Posted 2023-05-07

【中文标题】另一个下拉列表的事件更改后刷新剑道下拉列表

【英文标题】：Refresh Kendo dropdownlist after event change of another dropdownlist

【发布时间】：2017-11-05 02:34:40

【问题描述】：

当我从第一个 ddl 更改值时，我从另一个 ddl 的 Ajax 获取数据，但它不会刷新。

这是我的网格

$("#grid").kendoGrid(
        dataSource: 
height: 500,
                toolbar: ["create"],
                columns: [
                      command: ["edit"], title: " ", width: "150px", locked: true ,
                     field: "RowLabels", title: "Row Labels", width: "180px", locked: true ,
                     field: "IdValueStream", title: "VS", width: "90px", locked: true, editor: vsDropDownEditor, template: "#=getVsName(IdValueStream)#" , //, template: "#=IdValueStream.ValueStream#"
                     field: "IdLine", title: "Line", width: "180px", locked: true, editor: linesDropDownEditor , //, template: "#=getLineName(IdLine)#" 
                        field: "W1", title: Weeks[0].W1.substring(0, 10), width: "98px" , // 
                        field: "W2", title: Weeks[0].W2.substring(0, 10), width: "90px" ,
                        field: "W3", title: Weeks[0].W3.substring(0, 10), width: "90px" ,
                        field: "W4", title: Weeks[0].W4.substring(0, 10), width: "90px" ,
                        field: "W5", title: Weeks[0].W5.substring(0, 10), width: "90px" ,
                        field: "W6", title: Weeks[0].W6.substring(0, 10), width: "90px" ,
                        field: "W7", title: Weeks[0].W7.substring(0, 10), width: "90px" ,
                        field: "W8", title: Weeks[0].W8.substring(0, 10), width: "90px" ,
                        field: "W9", title: Weeks[0].W9.substring(0, 10), width: "90px" ,
                        field: "W10", title: Weeks[0].W10.substring(0, 10), width: "90px" ,
                        field: "W11", title: Weeks[0].W11.substring(0, 10), width: "90px" ,
                        field: "W12", title: Weeks[0].W12.substring(0, 10), width: "90px" ,
                        field: "W13", title: Weeks[0].W13.substring(0, 10), width: "90px" 
                ],
                editable: "inline"
            );

这是第一个ddl的编辑器的方法

function vsDropDownEditor(container, options) 
    $('<input id="ddlVs" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList(
                    dataTextField: "ValueStream",
                    dataValueField: "Id",
                    dataSource: categories,
                    select: onSelect
                );

这是来自第二个 ddl 编辑器的另一种方法

function linesDropDownEditor(container, options) 

    $('<input data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList(
                    autoBind: false,
                    dataTextField: "Line",
                    dataValueField: "Id",
                    dataSource: lines
                );

所以当我选择第一个 ddl 的一个项目时，我想刷新第二个 ddl

【参考方案1】：

为您的第二个下拉列表添加一个id 属性，然后在ddVs 的onSelect 函数中添加这行代码。

$("#nameOfYourSecondDropdownHere").data('kendoDropDownList').dataSource.read();

【讨论】：

如何将 ID 放入下拉列表？因为它会在网格中自动创建

将它放在将初始化 DDL 的元素上，例如：functionlinesDropDownEditor(container, options) $('') .appendTo(container) .kendoDropDownList( autoBind: false,...

【参考方案2】：

您还可以查看以下示例 - 在 Grid 中用作编辑器的级联 DropDownLists：

Add Cascading DropDownList Editors

【讨论】：

实际上我试过了，它可以工作，但只显示一个值，而不是所有的值都具有相同的级联 ID