2

我在 ASP.NET MVC4 项目中使用 Kendo UI Web。
我正在尝试为每个创建一个主/详细信息网格和一个 detailsTemplate。我对这种情况有一些疑问：
层次结构和细节有什么区别？
是否可以在主行单击而不是那个小三角形上的单独 div 中填充详细信息网格？
这段代码是我的起点：http: //jsfiddle.net/WKSkC/2/

var element = $("#grid").kendoGrid({
dataSource: {
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
    },
    pageSize: 6,
    serverPaging: true,
    serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
        [
            {field: "FirstName", title: "First Name", width: "110px" },
            { field: "LastName", title: "Last Name", width: "110px" },
            { field: "Country", width: "110px" },
            { field: "City", width: "110px" },
            { field: "Title" }
        ]});

function detailInit(e) {
  $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 5,
        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
    },
    scrollable: false,
    sortable: false,
    selectable: true,
    pageable: true,
    columns:
            [
                { field: "OrderID", width: "70px" },
                { field: "ShipCountry", title: "Ship Country", width: "110px" },
                { field: "ShipAddress", title: "Ship Address" },
                { field: "ShipName", title: "Ship Name", width: "200px" }
            ]
  }).data("kendoGrid");
 }

谢谢您的帮助。

4

1 回答 1

3

您可以使用 Grid 的 API 以编程方式对其进行扩展。

//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
   $(element).data().kendoGrid.expandRow($(this));
})

这里是更新版本。

或者，您可以使用使 Grid 可选择并使用 select 事件，而不是像上面显示的那样挂钩 click 事件。

于 2013-11-13T19:23:04.637 回答