Question

我是Kendo UI HTML v2013.1.226的新手。我正在尝试在剑道网格内级联组合框。在this fiddle。

HTML：

<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
    <div id="contentArea" style="background-color:Silver;">
        <div id="myList"></div>
    </div>
    <div id="footer" style="background-color:Silver;">
        Click on ShipCity to trigger custom editor
    </div> 
</div>

脚本：

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

当我选择船舶的国家/地区时，需要调用船舶城市列并列出城市名称，但它没有这样做。船舶城市又需要调用船舶的名称。在剑道网站上，演示级联在网格外部，我没有得到如何在网格内做同样的事情。任何人都可以帮助我或任何其他样本小提琴。

注意：我需要坚持使用此kendo版本，无法更改为更新版本。

Answer 1

它似乎就像传递＆＃34; additionalData＆＃34;一样简单。到级联的combox盒的读取方法。

这是非常好的，但功能就在那里。

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编辑可能不是最佳选择。

Answer 2

我已修复此问题，以便清除单元格的文本。

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

网格内部的Kendo UI级联ComboBox无法正常工作

2 个答案: