Category / Section
How to customize parent and child row in Tree Grid
1 min read
This Knowledge Base explains how to customize parent and child rows in Tree Grid
Solution
Using queryCellInfo and rowDataBound event of Tree Grid, we have customized the parent and child rows by checking the Boolean value hasChildRecords property of args.Data.
In the below example, we have demonstrated the same by rendering the command button only for the parent rows and added custom background colour only for the child rows.
JS
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
height: 400,
queryCellInfo: function (args) {
if (!args.data.hasChildRecords) {
if (args.cell.classList.contains("e-unboundcell")) {
args.cell.querySelector('.e-unboundcelldiv').style.display = "none" // hide the command button for child rows.
}
}
},
rowDataBound: function (args) {
if (!args.data.hasChildRecords) {
args.row.style.backgroundColor = "lightgreen"; // highlight the child rows
}
},
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },
{ field: 'taskName', headerText: 'Task Name', width: 200 },
{
headerText: 'Custom Button', width: 100,
commands: [
{ buttonOption: { content: ' Details', click: onclick } }]
}
]
});
treegrid.appendTo('#TreeGrid');
Figure 1 Parent and Child rows customization
Also refer the other frameworks demo links below,
