重新绑定 KendoGrid 中的 DropDownList，具体取决于同一行上其他 DropDownList 中选择的值

Question

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

每列定义为

 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();
        },

KENDO道场

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

最终解决方案

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

Answer 1

您可以为源列和目标列创建两个编辑器 (DropDownLists)。对于目标编辑器，您可以使用 cascadeFrom property, of which holds source dropdown id. Destination is filtered according to the selected options in the source DropDownLists. This is Kendo UI built in functionality and you can read more form here.

Answer 2

请尝试使用以下代码片段。

<!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");  
}

如有任何疑问，请告诉我。

重新绑定 KendoGrid 中的 DropDownList，具体取决于同一行上其他 DropDownList 中选择的值

Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row

jquery

telerik

kendo-ui

kendo-grid

kendo-dropdown