Kendo UI Grid multi level hierarchy (n-levels of hierarchy)

Question

I am using the Kendo UI Grid and currently display parent child records appropriately. However, it turns out that i will actually need to display n-levels vs. strictly pare

Answer 1

It took a while, but I finally worked out an answer with some guidance from the peeps at Telerik. I was just having the hardest time getting my head around the solution.

Vladimir (at Telerik) suggested that I use a custom ajax call in the detailInit function using a function on success to determine if I had child data to consider. Since I needed the detail grid no matter what, I moved the child check into another function that creates the detail grid. If I find child data, I add a detailInit parameter to the new grid. If not, I simply render the new detail grid.

The ajax initDetail function:

function detailInit(e) {
            var eventData = e;
            $.ajax({
                url: apiUrl + "ProcessJobs",
                type: "POST",
                data: {BoxId: e.data.JobId, AppId: e.data.AppId}, 
                dataType: "json",
                success: function(data, status, xhr) {
                    initializeDetailGrid(eventData, data);
                }
            }

The function to build the new detail grid with the check for children:

function initializeDetailGrid(e, result) {
            var moreChildren = result[0].HasChildren;
            var gridBaseOptions = {
                dataSource: result,
                scrollable: false,
                sortable: true,
                columns: [
                    {
                        field: "ParentJobId",
                        title: "Parent Job"
                    },
                    {
                        field: "JobId",
                        title: "Job Id"
                    },
                    {
                        field: "JobName",
                        title: "Job Name",
                    },
                    {
                        field: "JobStatus",
                        title: "Status"
                    },
                    {
                        field: "JobStatusId",
                        title: "Status Code"
                    },
                    {
                        field: "HasChildren",
                        title: "Has Children"
                    },
                    {
                        field: "ChildrenCount",
                        title: "Child Jobs"
                    }
                ]
            };

            var gridOptions = {};
            if (moreChildren) {
                gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
            } else {
                gridOptions = gridBaseOptions;
            };
            $("
").appendTo(e.detailCell).kendoGrid(gridOptions);
        };

For completeness, here is the full page and example data from the sample project. It is a .Net MVC4 based website, using Web API services for data and Kendo UI for the client.

Here is the page code:

@{
    ViewBag.Title = "n-level Grid";
}




    

        
Line of Business
        

    
    

        
Application
        

    
    

        
Filter
        

        
    


    

The data is actually hardcoded for this sample app, but I still return it via Web API. Here is a sample of the highest level data:

new Process {JobId = 108, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_108", ParentJobName = null, ParentJobId = null, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 3, HasChildren = true},
new Process {JobId = 109, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_109", ParentJobName = null, ParentJobId = null, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 4, HasChildren = true},
new Process {JobId = 110, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_110", ParentJobName = null, ParentJobId = null, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},
new Process {JobId = 111, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_111", ParentJobName = null, ParentJobId = null, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 5, HasChildren = true},

Here is some second level data (child data):

new Process {JobId = 1037, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1037", ParentJobName = "job_109", ParentJobId = 109, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 1038, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1038", ParentJobName = "job_109", ParentJobId = 109, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 1039, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1039", ParentJobName = "job_110", ParentJobId = 110, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},
new Process {JobId = 1040, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1040", ParentJobName = "job_110", ParentJobId = 110, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},

Some of the 3rd level data (grandchildren):

new Process {JobId = 5000, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5000", ParentJobName = "job_1039", ParentJobId = 1039, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5001, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5001", ParentJobName = "job_1039", ParentJobId = 1039, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5002, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5002", ParentJobName = "job_1040", ParentJobId = 1040, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5003, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5003", ParentJobName = "job_1040", ParentJobId = 1040, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5004, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5004", ParentJobName = "job_1041", ParentJobId = 1041, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 1, HasChildren = true},

And so on...

It is working correctly for 4 levels in my testing. There are formatting issues with the multiple nested grids that I will be addressing.