Node Traversing (Next, Previous)

[Shreekumar]

I'm using TreeView control and I'm trying to traverse the nodes from External Buttons.

Is there any way to Move to next or Previous Nodes on click of Button?

<ejs-treeview #treeClasses id="treeClasses" [fields]='treeClassesFields' (nodeClicked)='nodeClicked($event)'>

</ejs-treeview>

<button ejs-button [isPrimary]="true" cssClass="e-success"

(click)="previousNode()" [disabled]='selectedNode==null'>&lt; Previouse

</button>

<label>{{currentElement}}</label>

<button ejs-button [isPrimary]="true" cssClass="e-success"

(click)="nextNode()" [disabled]='selectedNode==null'>Next &gt;

</button>

nodeClicked(args: NodeClickEventArgs) {

this.selectedNode = args;

}

nextNode() {

this.currentElement = this.selectedNode.node.nextSibling.textContent;

// Here I want to set focus to next node in the Same Level

}

previousNode() {

this.currentElement = this.selectedNode.node.previousSibling.textContent;

// Here I want to set focus to Previous node in the Same Level

}

How to do this?

[Sowmiya Padmanaban]

Hi Shreekumar,  

 

Greetings from Syncfusion support. 

 

We have checked your reported query with TreeView component. Yes, it is possible to achieve it in TreeView component.  

 

Query 1- Focus the node when traversing by clicking the external next and previous buttons. 

 

To achieve your requirement, you need to fetch the whole list element of TreeView component and add the  “e-node-focus e-hover” class for next node during button click.  

 

Refer the below code snippet. 

    onNext() { 

      var a = document.querySelectorAll("li"); 

      for(var i=0; i < a.length-1;i++) { 

        debugger; 

        if(a[i].classList.contains("e-node-focus")) 

        { 

          // Focus the next node of TreeView node. 

          a[i].classList.remove("e-node-focus", "e-hover"); 

          a[i+1].classList.add("e-node-focus", "e-hover"); 

          i =0; 

          break; 

        } 

      } 

    } 

    onPrevious() { 

      var a = document.querySelectorAll("li"); 

      for(var i=1; i <= a.length-1;i++) { 

        if(a[i].classList.contains("e-node-focus")) 

        { 

           // Focus the previous node of TreeView node. 

          a[i].classList.remove("e-node-focus", "e-hover"); 

          a[i-1].classList.add("e-node-focus", "e-hover"); 

          i =0; 

          break; 

        } 

      } 

    } 

 

Refer the sample link below. 

https://stackblitz.com/edit/angular-cxbhqg-g6pbmp?file=app.component.ts 

 

Query 2- Select the node while traversing using external next and previous buttons. 

 

If you want to select the node during navigation. By achieve this, you need to change the SelectedNodes property on TreeView component during button click.  

 

Refer the below code snippet. 

 onNext() { 

      var a = document.querySelectorAll("li"); 

      for(var i=0; i < a.length-1;i++) { 

        this.MoveSelection(i); 

        if(a[i].getAttribute(["data-uid"]) == this.treeview.selectedNodes ) 

        { 

          // Select the next node of TreeView node. 

          this.treeview.selectedNodes = [a[i+1].getAttribute(["data-uid"])]; 

          i =0; 

          break; 

        } 

      } 

    } 

    onPrevious() { 

      var a = document.querySelectorAll("li"); 

      for(var i=1; i <= a.length-1;i++) { 

        if(a[i].getAttribute(["data-uid"]) == this.treeview.selectedNodes ) 

        { 

           // Select the previous node of TreeView node. 

          this.treeview.selectedNodes = [a[i-1].getAttribute(["data-uid"])]; 

          i =0; 

          break; 

        } 

      } 

 

Sample link: https://stackblitz.com/edit/angular-cxbhqg-o5nz2h?file=app.component.ts 

 

To know more about the TreeView component. Refer the below link. 

 

UG Documentation- https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/angular/demos/#/material/treeview/default 

 

API Reference- https://ej2.syncfusion.com/angular/documentation/api/treeview/ 

 

Please let us know, if you need any further assistance on this. 

 

Regards,  

Sowmiya.P 

[Shreekumar]

Thanks for the Reply.

It is working for only when expanded and also traversing child elements.

Expectation is:

When !'m at root level i.e. Local Disk (C:) and click on Next, it should traverse to Local Disk (D:). But it is traversing to child of  Local Disk (C:)  i.e. Program Files.

Traversing should happen based on the Node Level

If I'm at child node i.e.Program Files and click on Next, It should traverse within that level nodes.

Is it possible?

[Sowmiya Padmanaban]

Hi Shreekumar, 

 

We have checked your reported requirement with TreeView component. Yes, it is possible to achieve it in TreeView component.  In TreeView component, “e-active” class is added to the selected TreeView node and also you can fetch the level of the node using “aria-level” attribute. 

To achieve your requirement you can fetch all the node in particular level and traverse the node by button click. 

 

Refer the below code snippet. 

 onNext(args) { 

      // Get the Active node. 

      var active_node = document.querySelector(".e-active"); 

      // get the active node level. 

      var active_node_level = active_node.getAttribute(["aria-level"]); 

      // Fetch all the node in the particular level. 

      var Level_nodes = document.querySelectorAll(".e-level-" + active_node_level );  

        for(var i=0;i<Level_nodes.length-1;i++ ) { 

          if(Level_nodes[i].classList.contains("e-node-focus")) { 

               Level_nodes[i].classList.remove("e-node-focus", "e-hover"); 

               Level_nodes[i+1].classList.add("e-node-focus", "e-hover"); 

                i =0; 

                break; 

          } 

        } 

    } 

    onPrevious() { 

       // Get the Active node. 

      var active_node = document.querySelector(".e-active"); 

      // get the active node level. 

      var active_node_level = active_node.getAttribute(["aria-level"]); 

       // Fetch all the node in the particular level. 

      var Level_nodes = document.querySelectorAll(".e-level-" + active_node_level); 

        for(var i=1;i<Level_nodes.length;i++ ) { 

          if(Level_nodes[i].classList.contains("e-node-focus")) { 

             Level_nodes[i].classList.remove("e-node-focus", "e-hover"); 

             Level_nodes[i-1].classList.add("e-node-focus", "e-hover"); 

             i =0; 

             break; 

          } 

        } 

      } 

 

 

Refer the below sample link:  

https://stackblitz.com/edit/angular-cxbhqg-rvcmy6?file=app.component.ts 

Similarly, you can able to select the node based on node level. Refer the below sample link for selection. 

https://stackblitz.com/edit/angular-cxbhqg-elajnv?file=app.component.ts 

Please let us know, if you need any further assistance on this. 

Regards,  

Sowmiya.P 

[Shreekumar]

Thanks for the Reply. It is working in StackBlitz properly. In my application, I'm getting compilation error as below:

At this line 

var active_node_level = active_node.getAttribute(["aria-level"]);

error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.

At this line 

if ((Level_nodes[i].getAttribute(["data-uid"]) == active_node.getAttribute(["data-uid"]))) {

error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.

error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.

At this line

this.tree.selectedNodes = [Level_nodes[i + 1].getAttribute(["data-uid"])];

error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'.

[Sowmiya Padmanaban]

Hi Shreekumar,  

 

Sorry for the inconvenience. 

 

We have checked your reported issue with shared sample. We are able to reproduce it. Your reported issue occurs due to the datatype mismatch. 

 

 To resolve your issue, refer the below code snippet. 

   onNext(args) { 

     var active_node = document.querySelector(".e-active"); 

     var active_node_level = active_node.getAttribute("aria-level"); 

     var Level_nodes = document.querySelectorAll(".e-level-" + active_node_level );  

       for(var i=0;i<Level_nodes.length-1;i++ ) { 

         if((Level_nodes[i].getAttribute("data-uid") == active_node.getAttribute("data-uid"))) { 

             this.treeview.selectedNodes = [Level_nodes[i+1].getAttribute("data-uid")]; 

         } 

       } 

   } 

 

 

For your reference, we have attached angular application. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-angular-app-713373008.zip 

 

Please let us know, if you need any further assistance on this. 

 

Regards,  

Sowmiya.P