Kendo UI Grid - Nested child grids

To add hierarchy or nested child grids in Kendo UI Grid component, we can use the detailInit event for the parent grid and initialize the next level of hierarchy.

Lets say we have the following function which will return dummy data based on ParentAccountID.

private getGridData(parentAccountID: string) {
	var data = [
		{
			"RowLabel": "Initial Balance",
			"AccountID": "1",
			"AccountNo": 1,
			"AccountName": "Account1",
			"AccountTitle": "1 - Account1",
			"ParentAccountID": null,
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "2",
			"AccountNo": 2,
			"AccountName": "Account2",
			"AccountTitle": "2 - Account2",
			"ParentAccountID": null,
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "3",
			"AccountNo": 3,
			"AccountName": "Account3",
			"AccountTitle": "3 - Account3",
			"ParentAccountID": "1",
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "4",
			"AccountNo": 4,
			"AccountName": "Account4",
			"AccountTitle": "4 - Account4",
			"ParentAccountID": "2",
		}
	];

	var tempData = data;
	tempData = tempData.filter((obj) => {
		return obj.ParentAccountID === parentAccountID;
	});
		
	return tempData;
}

Here is how we can define the grid configuration to call above function to get data for ParentAccountID.

private createDataInquiryGrid3() {

	var tempData = this.getGridData(null);//Pass null as ParentAccountID for 1st level data.
	
	var element = $("#grid").kendoGrid({
		dataSource: {
			data: tempData,
		},
		height: 600,
		sortable: false,
		pageable: false,
		detailInit: this.detailInit,//this event will define child grid configuration
		dataBound: function () {
			this.expandRow(this.tbody.find("tr.k-master-row").first());
		},
		columns: [
			{ field: "AccountTitle", title: " ", aggregates: ["count"] },
			{ field: "AccountNo", title: "AccountNo" },
			{ field: "AccountName", title: "AccountName" },
		]
	});
}

private detailInit(e) {
	//e.data contains the current row's data-object.
	var getDataFunction = window["getGridData"];
	var tempData = getDataFunction(e.data.AccountID);
	
	$("<div/>").appendTo(e.detailCell).kendoGrid({
		dataSource: {
			data: tempData,
		},
		scrollable: false,
		sortable: false,
		pageable: false,
		columns: [
			{ field: "AccountTitle", title: " ", aggregates: ["count"] },
			{ field: "AccountNo", title: "AccountNo" },
			{ field: "AccountName", title: "AccountName" },
		]
	});
}

It will display the grids like this:

With detailInit event you can add multiple level of nested grids using the same event in nested grids.

References:

• Kendo UI Grid - Nested Child Grids

Related Post(s):

• Kendo UI Grid - Column Template