如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构

Posted 2023-05-07

【中文标题】如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构

【英文标题】：How to achieve N-level nested hierarchy in Kendo UI Grid using ASP.NET MVC

【发布时间】：2014-07-14 20:11:11

【问题描述】：

我正在尝试使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构 我可以实现特定数量的嵌套网格，但如何使用 asp.net MVC 中的特定数据实现 N 级嵌套网格

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

        )               
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new  style = "height:430px;" )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))            
        )        
        .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(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()
    )
</script>
<script>
    function dataBound() 
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    
</script>

使用此代码，我可以获得 1 个嵌套网格。

请指导获得 N 级剑道嵌套网格。谢谢

【参考方案1】：

您可以使用 Kendo UI Grids 实现 N 级层次结构。

您的模板中应该有 ClientDetailTemplateId。这是示例。

<script id="clientTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<TimeSheetManagement.Models.ClientView>()
                    .Name( "ClientGrid_#=Id#" )
                        .Columns( columns =>
            
                columns.Bound( e => e.Name ).Title("Client Name");
                columns.Bound( e => e.Address ).Title( "Client Address" );
                columns.Bound( e => e.City ).Title( "Client City" );
                columns.Bound( e => e.State );
                columns.Bound( e => e.ZipCode );
                columns.Bound( e => e.CreatedDate );
                columns.Bound( e => e.CreatedBy );
                columns.Bound( e => e.UpdatedDate );
                columns.Bound( e => e.UpdatedBy );
                //columns.Bound( "" ).ClientTemplate( @Html.ActionLink( "Edit" , "Create" , new  clientId = "#=Id#"  , new  title = "Edit Client"  ).ToHtmlString() );
             )
                .AutoBind( true )
                .DataSource( dataSource => dataSource
                    .Ajax()
                    .Read( read => read.Action( "GetClientsByProjectId" , "Client" , new  sProjectId = "#=Id#"  ) )
                )
                .ClientDetailTemplateId( "employeeTemplate" )
                .ToClientTemplate()
        )
</script>

这里是子模板的实现。

<script id="employeeTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<TimeSheetManagement.Models.EmployeeView>()
                    .Name( "EmployeeGrid_#=Id#" )
                .Columns( columns =>
                
                    columns.Bound( e => e.EmployeeName );
                    columns.Bound( e => e.Address );
                    columns.Bound( e => e.City );
                    columns.Bound( e => e.State );
                    columns.Bound( e => e.ZipCode );
                    columns.Bound( e => e.PhoneNumber );
                    columns.Bound( e => e.Email );
                    columns.Bound( e => e.Designation );
                    columns.Bound( e => e.CreatedDate );
                    columns.Bound( e => e.CreatedBy );
                 )
                .AutoBind( true )
                .DataSource( dataSource => dataSource
                    .Ajax()
                    .Read( read => read.Action( "GetEmployeesByClientId" , "Employee" , new  sClientId = "#=Id#"  ) )
                )
                .ToClientTemplate()
        )
    </script>

这是输出。如果您还有其他问题，请告诉我。希望对您有所帮助。

【参考方案2】：

为每个嵌套网格创建局部视图。每个部分视图网格都有一个 ClientDetailTemplate。

【讨论】：

感谢您充满希望的回答。你能用示例代码指导我吗？

请问有样品吗？

【参考方案3】：

我认为没有办法做这样的事情，因为糟糕的数据（树）是使用树视图插件或类似的东西显示的，这应该更清楚，这就是为什么即使他们有这种 ui 组件。

【讨论】：

我什至不能使用 Kendo UI Grid 做 3 级或 4 级层次结构吗？

是的，你应该能够做到这一点。

你能指导一下吗？