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中选择的值。但我不能做的是获取该行的Destion 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

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

最终解决方案

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

Answer 1

请尝试使用以下代码段。

let pathLength = 50 as Double // total distance view should move
let piFactor = M_PI / 180
let angle = 90 as Double // direction in which you need to move it
let xCoord = outView.frame.origin.x +  CGFloat(pathLength * sin(piFactor*angle)) //outView is name of view you want to animate
let yCoord = outView.frame.origin.y +  CGFloat(pathLength * cos(piFactor*angle))
UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
    self.outView.frame = CGRectMake(xCoord, yCoord, self.outView.frame.size.width, self.outView.frame.size.height)
        }, completion: { (Bool) -> Void in
})

供参考： -

<!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>

更新1 :(基于您的编辑器我更新了jquery选择器语句）

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

如果有任何疑虑，请告诉我。

Answer 2

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

在KendoGrid中重新绑定DropDownList，具体取决于在同一行

2 个答案: