Question

我在MVC中有一个kendo网格这是声明Html.Kendo（）。Grid（Model.Orders）

对象“Orders”有一个“详细信息”列表。我想将此列表放在具有ClientDetailTemplateId属性的第二个网格中。 demo

我的问题是，我如何设置模板的数据源，因为“模型”已经有数据，在层次结构的例子中，数据源调用控制器中的一个动作

Answer 1

我在这个问题上挣扎了很长一段时间，并最终了解到这可以通过服务器绑定来完成。

密钥似乎是（据我所知，未记录）DetailTemplate中可用的“item”变量，它为您提供“master”网格中的当前行，其中包含应绑定到的数据详细网格（在您的情况下为“详细信息”）

以下是来自Kendo的ServerHierarchy示例：

@model IEnumerable<Kendo.Mvc.Examples.Models.Employee>

@{ Html.Kendo().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .DetailTemplate(
        @<text>           
            @(Html.Kendo().Grid(item.Orders)
                    .Name("Orders_" + item.EmployeeID)
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.OrderID).Width(101);
                        columns.Bound(o => o.ShipCountry).Width(140);
                        columns.Bound(o => o.ShipAddress).Width(200);
                        columns.Bound(o => o.ShipName).Width(200);
                        columns.Bound(o => o.ShippedDate).Format("{0:d}");
                    })
                    .DataSource(dataSource => dataSource.Server())                    
                    .Pageable()
                    .Sortable()
                    .Filterable()
            )
        </text>
    )
    .RowAction(row => 
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
        else
        {
            var requestKeys = Request.QueryString.Keys.Cast<string>();
            var expanded = requestKeys.Any(key => key.StartsWith("Orders_" + row.DataItem.EmployeeID) ||
                key.StartsWith("OrderDetails_" + row.DataItem.EmployeeID));
            row.DetailRow.Expanded = expanded;
        }
    })
    .Pageable()
    .DataSource(dataSource => dataSource.Server().PageSize(5))    
    .Sortable()
    .Render();
}

Answer 2

在模板中而不是编写网格代码，调用局部视图并将Orders模型传递给它

<script id="template" type="text/kendo-tmpl">
@Html.Partial("_Orders",Model.Order)
</script>

在此局部视图中，将模型编写为订单模型

的Kendo网格代码

部分视图

 @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(70);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )

当本地数据时，Kendo web grid mvc层次结构数据源detailtemplate

2 个答案: