Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to programmatically focus to a node in PrimeNG Tree?

Using PrimeNG, I can scroll to a TreeNode:

In html:

<p-tree #mytreeid id="mytree"></p-tree>

In Angular:

@ViewChild("mytree") mytree: Tree;
// selection is the TreeNode you want to scroll into view
scrollToSelectionPrimeNgDataTree(selection, tree, elementIdName) {
      if (tree.value !== null) {
          let index = tree.value.indexOf(selection);
              let ele = document.getElementById(elementIdName).querySelectorAll("p-treenode")[index];
              ele.scrollIntoView();
              //ele.focus();
      }
  }

Question: How to make the TreeNode(ie. 'selection') focused? I tried to call the focus() method, but focus() is not the method of the Element.

like image 483
Steven Li Avatar asked Sep 14 '25 16:09

Steven Li


1 Answers

I found the solution, we only need to set the [(selection)] to the selected node:

<p-tree #mytree id="mytree" [value]="componentGroups" selectionMode="single" [(selection)]="selectedNode">
like image 139
Steven Li Avatar answered Sep 16 '25 19:09

Steven Li