PrimeNG Treetable programmatically expand all nodes not working

Question

I'm trying to recursively expand all nodes on a Primeng TreeTable component but without success. The row icons change and nothing more happens, except when i manualy click on the expand/colapse icon and all nodes are expanded/collapsed accordingly.

Here a stackbliz link for what i'm trying to do, Stackblitz code

And this are my expand/colapse methods:

public expandAll(): void {
    this.files1.forEach(node => {
        this.expandCollapseRecursive(node, true);
    });
}

public collapseAll(): void {
    this.files1.forEach(node => {
        this.expandCollapseRecursive(node, false);
    });
}

private expandCollapseRecursive(node: TreeNode, isExpand: boolean): void {
    node.expanded = isExpand;
    if (node.children) {
        node.children.forEach(childNode => {
            this.expandCollapseRecursive(childNode, isExpand);
        });
    }
}

filipduarte filipduarte · Accepted Answer · 2020-07-17T17:36:30

I found a solution that works for me using Lodash cloneDeep, making a deep clone from the TreeNode array then doing all the changes in the cloned one before overwriting the "this.files1" property, then everything works.

public expandAll(): void {
    const temp = cloneDeep(this.files1);
    temp.forEach(node => {
        this.expandCollapseRecursive(node, true);
    });
    this.files1 = temp;
}

public collapseAll(): void {
    const temp = cloneDeep(this.files1);
    temp.forEach(node => {
        this.expandCollapseRecursive(node, false);
    });
    this.files1 = temp;
}

private expandCollapseRecursive(node: TreeNode, isExpand: boolean): void {
    node.expanded = isExpand;
    if (node.children) {
        node.children.forEach(childNode => {
            this.expandCollapseRecursive(childNode, isExpand);
        });
    }
}

But is there a better answer?

PrimeNG Treetable programmatically expand all nodes not working

1 Answers