在 ASP.NET Kendo MVC 的单个父网格中显示同一级别的 2 个子网格答案

【问题标题】：Show 2 child grids at the same level in a single parent grid in ASP.NET Kendo MVC在 ASP.NET Kendo MVC 的单个父网格中显示同一级别的 2 个子网格
【发布时间】：2019-09-26 05:49:00
【问题描述】：

谁能给我提供类似下面链接中使用 kendo MVC 的解决方案？

Creating 2 child kendo grids at the same level

谢谢！

【问题讨论】：

标签： kendo-grid kendo-asp.net-mvc hierarchy kendo-clienttemplate

【解决方案1】：

使用客户端模板功能。所以在你的网格上：

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(130);
        columns.Bound(e => e.LastName).Width(130);
        columns.Bound(e => e.Country).Width(130);
        columns.Bound(e => e.City).Width(110);
        columns.Bound(e => e.Title);

    })               
    .Sortable()
    .Pageable()
    .Scrollable()
    >> refer to the template
    .ClientDetailTemplateId("template")
... etc

然后用 2 个网格制作模板：

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipCountry).Width(150);
                columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.ShipName).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid2_#=EmployeeID#") // template expression, to be evaluated in the master context
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Width(110);
            columns.Bound(o => o.ShipCountry).Width(150);
            columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
            columns.Bound(o => o.ShipName).Width(300);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
)
</script>

.ToClientTemplate() 很重要。还需要为每一行设置不同的网格名称。如果需要，您可以混合其他 HTML 进行组织。见here。

【讨论】：