Tree questions

UI Components for Angular
Post Reply
Posts: 28
Joined: 14 Nov 2016, 23:12

24 Jun 2019, 21:32


How to put a scrollbar in a tree (so when it is expanded and goes below page end, it show a scorllbar) ?

Also is there a way to select a tree node programmatically,
for example make root node initially selected (and showing its children) ?

Please advise.


Posts: 1
Joined: 09 Aug 2019, 08:13

09 Aug 2019, 08:17

I kept parentId in the children node and travel back from the desired selection to way up by using getNodeWithKey(node, nodelist) method and kept on expanding. I am not sure about how to get the scroll bar to move to the selection.


Posts: 10
Joined: 02 Aug 2019, 23:58

09 Aug 2019, 19:25

I put the tree inside a scroll panel and that worked.

Here is a snippet:

Code: Select all

<p-scrollPanel [style]="{width: '100%'}">

<div class="content-section implementation">

  <h3>Single Selection</h3>
  <p-tree [value]="filesTree2" selectionMode="single" [(selection)]="selectedFile"
      (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"></p-tree>
  <div style="margin-top:8px">Selected Node: {{selectedFile ? selectedFile.label : 'none'}}</div>

  <h3>Horizontal Tree</h3>
  <p-tree [value]="filesTree3" layout="horizontal" selectionMode="single" [(selection)]="selectedFile3" ></p-tree>
  <div style="margin-top:8px">Selected Node: {{selectedFile3 ? selectedFile3.label : 'none'&#125;&#125;</div>


Posts: 10
Joined: 02 Aug 2019, 23:58

12 Aug 2019, 05:36

The Tree demo shows an example of programmatic select, expand, collapse.

It is the tenth one down: Programatic Tree Expansion

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests