在 KendoGrid 中重新绑定 DropDownList，取决于在同一行的其他 DropDownList 中选择的值答案

【问题标题】：Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row在 KendoGrid 中重新绑定 DropDownList，取决于在同一行的其他 DropDownList 中选择的值
【发布时间】：2016-05-05 15:34:42
【问题描述】：

这是一个常见问题，但我不知道如何使用 KendoUI 小部件和 Javascript 解决此问题。我有一个 KendoGrid，其数据源来自对 Web 服务的 AJAX 调用。数据绑定到列。两列（Source 和 Destination）是两个下拉列表：

每一列定义为

 if (stringStartsWith(colTitle, 'Source')) {
                    columns.push({
                        field: dataItem.replace(/\s+/g, ''),
                        title: colTitle,
                        width: 150,
                        locked: false,
                        editor: sourceDropDownEditor,
                        //template: "#=SourcetankIdentifier#",
                        attributes: { style: "text-align: left" },
                        type: "text"
                    });
                }

SourceDropDownEditor 如下：

function sourceDropDownEditor(container, options) {
    $('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Source",
            dataValueField: "Source",
            dataSource: Sources           
        });
}

目的地下拉列表也是如此。

现在，我想要的是，当用户单击“编辑”按钮（网格是使用内联编辑定义的）并从源 DDL 中选择某个源值时；目标 DDL 中的列表必须根据此值更改。

我编写了一个函数来检索正确的列表，这取决于在源 DDL 中选择的值。但我不能做的是获取该行的目标 DLL 并相应地设置数据源。

根据要求提供更多详细信息：

网格是动态构建的：

function generateGrid(JSONData) {

    var model = generateModel(JSONData, selectedMenu);
    var columns = generateColumns(model);
    var data = generateData(gridData, columns);  

   var grid = $("#mainGrid").kendoGrid({              
        edit: function (e) {            
           ..
        },
        dataSource: {
            data: data,
            schema: {
                model: model
            },
            sort:   {
                field: defaultSort.replace(/\s+/g, ''),
                dir: "desc"               
            }
        },
        toolbar: [
            ..
        ],
        columns: columns,        
        editable: "inline",       
        sortable: true,                 
        resizable: true,
        filterable: true,
        selectable: "multiple",
        cancel: function(e) {
            $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
        },

剑道道场

这里dojo.telerik.com/uXeKa。它基本上反映了网格模板和列字段

最终解决方案

最终解决方案在这里：dojo.telerik.com/uXeKa/2。不需要在 Grid 的 Edit 功能中添加任何内容。只需要实现Source DDL的onChange函数，并设置目标的数据源。

【问题讨论】：

能否提供更多代码？我要求它识别以下内容， 1. 下拉菜单在正常模式或编辑模式下显示。 2.你如何将数据源绑定到下拉列表。
1.下拉菜单在编辑模式下显示。 2. 数据源“Sources”是一个静态数组，它被绑定到“SourceDDL”中，如第二段代码中所述。而第一段代码是 Grid 定义中描述的“generateColumns”方法的一部分。
我真的开始相信，这实际上是不可能实现的。因为数据源实际上是绑定到“列”，而不是每一行中的元素。
我很抱歉，但我现在不在城里，所以很可能会在周五尝试解决您的问题。
我不确定是否可以通过内联编辑完成...但如果没有内联编辑，它可以完成。

标签： jquery kendo-ui telerik kendo-grid kendo-dropdown

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid">
    </div>
    <script>



        var sources = [];
        var destinations = [];

        var products = [{
            ProductID: 1,
            ProductName: "Chai",
            SourceID: 1,
            DestinationID: 1,

        }, {
            ProductID: 2,
            ProductName: "Chang",
            SourceID: 2,
            DestinationID: 1,

        }, {
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            SourceID: 3,
            DestinationID: 2,

        }, {
            ProductID: 4,
            ProductName: "Chef Anton's Cajun Seasoning",
            SourceID: 4,
            DestinationID: 2,
        }, {
            ProductID: 5,
            ProductName: "Chef Anton's Gumbo Mix",
            SourceID: 4,
            DestinationID: 2,
        }];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                sortable: true,
                edit: onGridEdit,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductName" },
                     { field: "SourceID", title: "SourceID", values: sources },
                     { field: "DestinationID", title: "DestinationID", values: destinations },
                     { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });

        var destinationID = 0;

        function onGridEdit(arg) {
            destinationID = arg.model.DestinationID;
            $.ajax({
                url: "http://localhost:3470/Home/GetSource",
                type: 'GET',
                success: function (data) {
                    var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList");
                    sourceDDL.bind("change", onChange);
                    sourceDDL.setDataSource(data);
                    sourceDDL.value(arg.model.SourceID);
                    onChange();
                }
            });

        }

        function onChange(arg) {
            var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value();



            $.ajax({
                url: "http://localhost:3470/Home/GetDestination",
                type: 'GET',
                data: { SourceID: sourceid },
                success: function (data) {
                    var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList");
                    destinationDDL.setDataSource(data);

                    if (arg) {
                        // Please uncomment below code if you want to reset ddl value on sourceDDl value change
                        // destinationDDL.select(-1);
                    }
                    else {
                        destinationDDL.value(destinationID);
                        destinationID = 0;
                    }
                }
            });
        }
    </script>
</body>
</html>

供参考：-

public class Source
{
    public int value { get; set; }
    public string text { get; set; }
}

public class Destination
{
    public int value { get; set; }
    public string text { get; set; }
}

.....
.....
public ActionResult GetSource()
{
    List<Source> list = new List<Source>();

    list.Add(new Source() { value = 1, text = "cat1" });
    list.Add(new Source() { value = 2, text = "cat2" });
    list.Add(new Source() { value = 3, text = "cat3" });
    list.Add(new Source() { value = 4, text = "cat4" });
    list.Add(new Source() { value = 5, text = "cat5" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

public ActionResult GetDestination(int? SourceID)
{
    List<Destination> list = new List<Destination>();

    list.Add(new Destination() { value = 1, text = "des1_" + Convert.ToString(SourceID) });
    list.Add(new Destination() { value = 2, text = "des2_" });
    list.Add(new Destination() { value = 3, text = "des3_" });
    list.Add(new Destination() { value = 4, text = "des4_" });
    list.Add(new Destination() { value = 5, text = "des5_" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

更新 1：（根据您的编辑器，我更新了 jquery 选择器语句）

function onGridEdit(arg) {
    var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList");
}
function onChange(arg) {
    var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value(); 
    var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList");  
}

如果有任何问题，请告诉我。

【讨论】：

您好 Jayesh，感谢您的回答。不幸的是， $(arg.container).find("select[name^='']") 返回 null。如果您看到第一个代码，我的 DDL 不是“选择”字段。请查看 SourceDropDownEditor 代码。
如果你能提供jsfilldle/kendo dogo，我可以重现这个问题。
嗨 Jayesh，这里是剑道道场：dojo.telerik.com/uXeKa 它反映了网格模型和字段。希望对你有帮助
我已经更新了我上面的代码sn-p。我添加了代码，可以帮助您解决您在第一条评论中提到的错误。
它有帮助。最终解决方案在这里：dojo.telerik.com/uXeKa/2。不需要在 Grid 的编辑功能中添加任何内容。只需要实现Source DDL的onChange函数，并设置目的地的数据源。但是你的解决方案有帮助，tnx

【解决方案2】：

您可以为源列和目标列执行两个编辑器 (DropDownLists)。对于目标编辑器，您可以使用 cascadeFrom 属性，其中包含源下拉列表 ID。根据源 DropDownLists 中的选定选项过滤目标。这是内置功能的 Kendo UI，您可以阅读更多表单 here。

【讨论】：