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: