How to Expand or Collapse Level Child of Node in JavaScript Tree Grid?

This Knowledge base explains how to expand or collapse children in all levels of a root parent in JavaScript Tree Grid.

Solution

In Tree Grid, when you expand or collapse a parent record, only that specific record will get affected and the expand/collapse state of it’s children remains the same.

For example:

• If TaskID 1 is in collapsed state which has two child records TaskID 2 and TaskID 3 which in turn also have children.
• Currently, TaskID 2 and TaskID 3 both are in collapsed state. Expanding the parent TaskID 1 will not affect the expand/collapse state of it’s children. i.e TaskID 2 and TaskID 3 will remain collapsed.
• This is the default behaviour of Expand/Collapse functionality of Tree Grid.
• But we can expand/collapse children in all levels of a root parent of Tree Grid by following the below customization.

Customization

When we expand a record in Tree Grid, “expanding” event will be triggered before the record get expanded. In this event, we can check if the expanded record has children from the property “hasChildRecords” which is available in the argument of expanding event inside “args.data”.

If the record has children (i.e. if “hasChildRecords” property is true), we can loop through the child records and expand them by using the method expandRow of Tree Grid.

For collapsing children in all levels on collapsing the root level parent, we need to check the “hasChildRecords” property of the collapsed parent record in the “collapsing” event and if children present, we can loop through them and collapse all children by using the collapseRow method of Tree Grid.

JS

import { TreeGrid } from "@syncfusion/ej2-treegrid";
import { sampleData } from "./data-source";
 
let treegrid: TreeGrid = new TreeGrid({
    dataSource: sampleData,
    childMapping: "subtasks",
    treeColumnIndex: 1,
    collapsing: collapsing,
    expanding: expanding,
    columns: [
        { field: "taskID", headerText: "Task ID", width: 70, textAlign: "Right" },
        { field: "taskName", headerText: "Task Name", width: 200, textAlign: "Left" },
        { field: "duration", headerText: "Duration", width: 80, textAlign: "Right" },
        { field: "progress", headerText: "Progress", width: 80, textAlign: "Right" },
        { field: "priority", headerText: "Priority", width: 90 }
    ]
});
treegrid.appendTo("#TreeGrid");
 

Code for Expanding and Collapsing Event

 
function collapsing(args) {
    if (args.data.hasChildRecords) {
        collapseDeepChild(args.data); 
        // method to loop through children and collapse them
    }
}
function expanding(args) {
    if (args.data.hasChildRecords) {
        expandDeepChild(args.data); 
       // method to loop through children and expand them
    }
}
function collapseDeepChild(data) {
    let child = data.childRecords;
    for (let i = 0; i < child.length; i++) {
        if (child[i].hasChildRecords) {
            collapseDeepChild(child[i]);
            treegrid.collapseRow(null, child[i]); 
           //collapsing child row using method "collapseRow"
        }
    }
}
function expandDeepChild(data) {
    let child = data.childRecords;
    for (var i = 0; i < child.length; i++) {
        if (child[i].hasChildRecords) {
            collapseDeepChild(child[i]);
            treegrid.expandRow(null, child[i]); 
            //expanding child row using method "expandRow"
        }
    }
}
 

JavaScriptDemo

Also refer the other frameworks demo links below,

AngularDemo

ReactDemo

VueDemo

Conclusion

I hope you have enjoyed learning  how to expand or collapse level child of Node in JavaScript Tree Grid.

You can refer to our JavaScript Tree Grid feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Tree Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!