How to collapse or expandAll nodes to a specific level in Treeview

[pooja kalegowda]

Hi Team,

I need to use collapseall and expandall method of treeview to a specific level on clicking of context menu option on the node which will have collapse to specific level option. Can I get any reference for this.

Regards,

Pooja K

[Shalini Maragathavel]

Hi Pooja,   

  

Thanks for contacting Syncfusion support.  

  

We checked your query and understand that you need to expand/collapse the specific levels in the TreeView component. Before proceeding further, can you please confirm us the following information to understand your requirement better, 

1. Do you wish to expand/collapse all the child nodes of the particular parent or you need to expand/collapse the child nodes to the specific levels? Please elaborate on the term “specific levels” required in your case.
2. Elaborate on your requirement in detail with pictorial or video demonstration(if possible).

 

Please revert with the above details to assist you promptly.  

 

Regards, 

Shalini M. 

[pooja kalegowda]

Hi Shalini,

Thank you for your response.. Kindly check my representation below:

1. I want to have context menu option on each node and on clicking on collapse to that level it means all the nodes which are at same level of the selected node should not show children if present.

2. Here all Level 3 nodes are made invisible on clicking on Level2 collapse

Case 1: Collapse @Level 1.1.1 or 1.2.1 or ….

Level 1.1

• Level 1.1.1
• Level 1.1.2

Level 1.2

• Level 1.2.1
• Level 1.2.2

Similarly I should have this option for all the node.
2. How is the optional parameter in collapseAll() function used without actually passing the nodeID array. Can that be used in this scenario?

Kindly assist me with my requirement

[Indhumathy Loganathan]

Hi Pooja, 

 

We have validated your requirement in TreeView component. Please find the answer for your queries. 

 

Query 1: Context menu option on each node and on clicking collapse all, the nodes which are at same level needs to be collapsed 

 

We have prepared a TreeView sample which will have context menu option “expand” and “collapse”. While clicking on the option, the same level nodes available in the entire TreeView will be collapsed or expanded based on the selected node level. Please check the below code snippet. 

 

public menuclick(args: MenuEventArgs) { 

  let targetNodeId: string = this.treevalidate.selectedNodes[0]; 

  let items = [], nodes = []; 

  let treeView = document.getElementById("tree"); 

  let nodeId = treeView.querySelector('[data-uid="' + targetNodeId + '"]'); 

  if(targetNodeId != null){ 

    if (nodeId.classList.contains("e-level-1")) { 

      items.push(treeView.querySelectorAll(".e-level-1")); 

    } else if (nodeId.classList.contains("e-level-2")) { 

      items.push(treeView.querySelectorAll(".e-level-2")); 

    } else { 

      items.push(treeView.querySelectorAll(".e-level-3")); 

    } 

    for (var i = 0; i < items[0].length; i++) { 

      nodes.push(items[0][i].getAttribute("data-uid")); 

    } 

  }  

  if (args.item.text == "Expand") { 

    this.treevalidate.expandAll(nodes); 

  } else { 

    this.treevalidate.collapseAll(nodes); 

  } 

} 

 

Please find the sample demonstrating the solution from below link. 

 

https://stackblitz.com/edit/angular-tree-expand-collapse?file=app.component.ts 

 

Query 2: How the collapseAll function works without passing the nodeID array 

 

If the array of nodes are not passed to collapseAll method, it will collapse the entire TreeView nodes which are currently in expanded state. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[pooja kalegowda]

Hi Indhumathy,

Thank you so much for your response. Here I can find up to level-3 of tree and even we can extend it to certain levels if we know the number of node-level, but my Treeview data nodes are huge and I won't be knowing how many level deep the nodes will be present, there may be many levels. In that case do we have any other method for getting this e-level-** and then doing the same operation. If then can you please provide me any reference on this.

Regards,

Pooja K

[Indhumathy Loganathan]

Hi Pooja, 

 

Sorry for the inconvenience. 

 

We have validated your requirement in TreeView component.  As an alternate way, you can get the specific level of nodes by using the aria-level attribute in nodes and push it inside an array to perform expand and collapse action. We have modified the sample as per your request, please check the below code snippet. 

 

  public menuclick(args: MenuEventArgs) { 

    let targetNodeId: string = this.treevalidate.selectedNodes[0]; 

    let items = [], 

      nodes = []; 

    let treeView = document.getElementById('tree'); 

    let nodeId = treeView.querySelector('[data-uid="' + targetNodeId + '"]'); 

    let level = nodeId.getAttribute('aria-level'); 

    if (targetNodeId != null) { 

      items.push(treeView.querySelectorAll('[aria-level="' + level + '"]')); 

      for (var i = 0; i < items[0].length; i++) { 

        nodes.push(items[0][i].getAttribute('data-uid')); 

      } 

    } 

    if (args.item.text == 'Expand') { 

      this.treevalidate.expandAll(nodes); 

    } else { 

      this.treevalidate.collapseAll(nodes); 

    } 

  } 

 

You can find the sample from below link. 

 

https://stackblitz.com/edit/angular-tree-expand-collapse-ttkfjq?file=app.component.ts 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L