PrimeNG: How to programmatically expand a lazily loaded tree

Question

I have a Angular2 Primefaces Tree that is lazily loaded and is used as the navigation component of my application. Clicking nodes in the tree navigates to a corresponding route. I want the reverse to be true: That whenever the application is navigated to a route, the tree will expand and select accordingly.

Since the tree is outside of the router-outlet, I have its component get route parameters from a service (because ActivatedRoute doesn't work outside of router-outlet yet...) and call a method that searches my TreeNode[] for the correct node, then expands it (by setting .expanded = true), then searches its children, then expands it, etc until the expanded state of the Tree should match my route.

Problem is that what I end up with is the top-level node's arrow points down instead of right, but none of its children are shown. I think this has to do with lazy loading, but I don't know how to resolve it. Am I missing something?

davaus davaus · Accepted Answer · 2018-04-09T23:37:12

This may be of use, although it's not a direct answer. I implemented a double click node expansion on a lazy loading version of the tree by using a dummy class:

 export class NodeLoader {
        node: TreeNode;
    }

and then using it via templating the node, to pass the node object into the normal expander event code as a property of a dummy event. This then splices into the normal lazy loading code and seems to work well:

  <style>  
     .icon {
            background-image: url(/dist/assets/images/redicon12.png);
            float: left;
            height: 12px;
            width: 12px;
            margin-right: 5px;
            margin-top: 4px;
            margin-left: -3px;
        }
    </style>

    <p-tree #treecomp
            selectionMode="single"
            [value]="root"
            [style]="{'overflow':'auto','width':'100%'}"
            [loading]="loading"
            (onNodeExpand)="loadNode($event)"
            (onNodeSelect)="nodeSelect($event)">

        <ng-template let-node pTemplate="default">
            <!--if there is not  a collapsedIcon or expandedIcon  set in the data or no font-awesome class is set 
then use custom icons .font-awesome changes the spacing so it must be allowed for  -->
            <ng-container *ngIf="node.collapsedIcon!=null">

                <div class="icon" (dblclick)="expandNode(node)"></div>

            </ng-container>
            <div (dblclick)="expandNode(node)">{{node.label}}</div>
        </ng-template>
    </p-tree>

.ts code:

expandNode(node: TreeNode) {
   node.expanded = !node.expanded;
   let event: NodeLoader = new NodeLoader();
   event.node = node;
   this.loadNode(event);
}
loadNode(event) {
    if (event.node) {
        //the node data is stored as a pipe delimited string
        let vals: string[] = event.node.data.split('|');            
        //make a call to a remote url to load children of the current node 
        //and add the new nodes as children
        let id: string = vals[0]; 
        this.loading = true;
        this.nodeService.getTreeChildren(id).subscribe(nodes => {
            event.node.children = nodes;
            this.loading = false;
        }); 
    }
}

I hope this helps you to implement your code (though it's probably too late :( )

PrimeNG: How to programmatically expand a lazily loaded tree

1 Answers