How to achieve N-level nested hierarchy in Kendo UI Grid using ASP.NET MVC

Question

I am trying to implement N-level nested hierarchy in Kendo UI Grid using ASP.NET MVC i can implement specific number of Nested Grid but how to implement N-level nested Grid usin

Answer 1

I think is no way to do something like this because suck kind of data (tree) are displayed using treeview plugins or something like that , this should be more clearly , this is why even they have this kind of ui component.

Answer 2

You can achieve N-level Hierarchy using Kendo UI Grids.

You should have ClientDetailTemplateId in your templates. Here is the example.

<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>

Here is the implementation for child template.

<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>

Here is the output. Let me know if you have any more questions. I hope this will help you.

Answer 3

Create partial views for each of your nested grids. The partial view grids will each have a ClientDetailTemplate.