Combobox 网格内的剑道UI级联组合框不工作

我是剑道UI HTML v2013.1.226新手。我正在尝试在剑道网格中级联组合框。在

html:

脚本：

var myDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            id: "OrderID",
            fields: {
                OrderID: { type: "number" },                    
                ShipName: { type: "string" },
                ShipCountry: { type: "string" },
                ShipCity: { type: "string" },
                ShipName: { type: "string" }
            }
        }
    },
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
});

var $footer = $("#footer");

var gridHeight = function () {
    return $(window).height() - $footer.height() - 2;
}

var $grid = $("#myList").kendoGrid({
    scrollable: { virtual: true },
    editable: true,
    dataSource: myDataSource,
    sortable: true,
    height: gridHeight(),
    columns: [
        { field: "OrderID" },
        { field: "ShipName"},
        { field: "ShipCountry", 
            title : "Ship's Country",
            editor: function(container, options) {
                $('<input id="ShipCountry1" required data-text-field="ShipCountry" data-value-field="ShipCountry" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    filter: "contains",
                    placeholder: "Select category...",
                    dataTextField: "ShipCountry",
                    dataValueField: "ShipCountry",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: 'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCountry'
                        }
                    },
                });
            }
        },
        { field: "ShipCity", 
            title : "Ship's City",
            editor: function(container, options) {
                $('<input id="ShipCity1" required data-text-field="ShipCity" data-value-field="ShipCity" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    autoBind: false,
                    cascadeFrom: "ShipCountry1",
                    filter: "contains",
                    placeholder: "Select product...",
                    dataTextField: "ShipCity",
                    dataValueField: "ShipCity",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCity'
                        }
                    }
                });
            }
        },
        { field: "ShipName", 
            title : "Ship's Name",
            editor: function(container, options) {
                $('<input id="ShipName1" required data-text-field="ShipName" data-value-field="ShipName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
                     autoBind: false,
                    cascadeFrom: "ShipCity1",
                    filter: "contains",
                    placeholder: "Select product...",
                    dataTextField: "ShipName",
                    dataValueField: "ShipName",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipName'
                        }
                    }
                });
            }
        }
    ]
});

$("#rootLayout").kendoSplitter({
    orientation: "vertical",
    panes: [
        { scrollable: false, collapsible: false, size: "90%" },
        { collapsible: true, size: "10%" }
    ]
});

var resizeGrid = function () {
    var dataArea = $grid.find(".k-grid-content");
    var newHeight = gridHeight();
    var diff = $grid.innerHeight() - dataArea.innerHeight();

    $grid.height(newHeight);
    dataArea.height(newHeight - diff);
}

$(window).resize(function () {
    resizeGrid();
});

当我选择船的国家时，需要调用船的城市列并列出城市名称，但它没有这样做。船的城市需要调用船的名称。在剑道网站上，演示级联在网格外，我不知道如何在网格内做同样的事情。有人能帮我一下吗？还有其他的提琴样品

---

注意：我需要坚持使用这个剑道版本，不能更改为更新版本。

它看起来很简单，只需将额外的数据传递给级联组合框的读取方法即可

这是相当混乱的，但功能是存在的

columns.Bound(e => e.SportId).Title("Fav Sport").EditorTemplateName("SportsList");
columns.Bound(e => e.TeamId).Title("Fav Sport2").ClientTemplate("#=SportName#").EditorTemplateName("SportsList2");

SportsList2的编辑器模板是我们所关心的。在这里，注意read方法上的data函数调用

@(Html.Kendo().DropDownList()
    .Name("TeamId")                                
    .DataTextField("Text")
    .DataValueField("Value")             
    .DataSource(source =>
        source.Read(read => read.Action("GetSports2", "GridPost")
            .Data("ddlData"))
    ))         

在主视图中，需要定义此ddlData函数

function ddlData() {
    var row = $(event.srcElement).closest("tr");
    var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
    var dataItem = grid.dataItem(row);
    return { sportId: dataItem.SportId }
}

public JsonResult GetSports2(int sportId)
{
   // pull data
}

---

您应该注意，在进入编辑模式之前，当单击单元格时，级联列不会更新，这就是为什么我说InCell编辑可能不是最佳选项

为了清除单元格中的文本，我已将其修复如下

$('#Id of the Dropdown').closest("td").next().html('');

---

有意思的问题，让我看看我能不能把事情搞定。我想知道incell编辑是否是最好的选择。参考非常感谢您的回复。我无法获得您的ASP.NET剑道代码。请您用剑道HTML告诉我，或者编辑我的JSFIDLE。提前谢谢。我不知道剑道的web服务是如何设置的，所以我不知道如何编辑剑道，因为这取决于web服务url。

$('#Id of the Dropdown').closest("td").next().html('');