asp.net-mvc-4 – 如何使用ASP.NET MVC在Kendo UI Grid中实现N级

发布时间：2020-12-16 07:17:55 所属栏目：asp.Net 来源：网络整理

导读：我正在尝试使用ASP.NET MVC在Kendo UI Grid中实现N级嵌套层次结构我可以实现特定数量的嵌套网格,但如何使用asp.net MVC中的特定数据实现N级嵌套网格 @(Html.Kendo().GridKendo.Mvc.Examples.Models.EmployeeViewModel() .Name("grid") .Columns(columns = {

我正在尝试使用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-Level的剑道嵌套网格.谢谢

解决方法

您可以使用Kendo UI网格实现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>

这是输出.如果您还有其他问题,请与我们联系.我希望这能帮到您.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!