Create a custom toogle button to expand and collpase all the descendant of a node

[Reuvain Levin]

Hi,

I would like to create a custom button to programmatically be able to toggle all the descendants of a node.

I tried this

  toggle(node) {

    let cn = this.diagram.nodes.find(n => n.id === node.id);

cn.isExpanded = !cn.isExpanded;

}

This worked twice, once to collapse the node then to expand the node and then it stopped doing anything.

I then tried and these 2 lines 

  toggle(node) {

    let cn = this.diagram.nodes.find(n => n.id === node.id);

    cn.isExpanded = !cn.isExpanded;

    this.diagram.dataBind(); 

    this.diagram.doLayout(); 

}

but the only difference was it moved the ui around a little but didn't collapse the node

thank you

[Aravind Ravi]

Hi Reuvain,

We will validate and update you with more details on July 6^th 2022.

Regards

Aravind Ravi

[Reuvain Levin]

Hi Aravind,

Thank you

[Aravind Ravi]

Hi Reuvain,

We have created a sample to expand / collapse the nodes using the toogle button. In the sample we have expand the parent node, while expand / collapse the root node multiple times, the node has been collapsed/ expand properly. We have attached a video demonstration of how expand / collapse get work. Please find the video in the below link

Video: https://www.syncfusion.com/downloads/support/forum/176000/ze/Expand-Collapse-video-1583814272

Sample: https://stackblitz.com/edit/angular-5dwbj1?file=app.component.html

Code Snippet:

public Change() {

    this.diagram.selectedItems.nodes[0].isExpanded =

      !this.diagram.selectedItems.nodes[0].isExpanded;

    this.diagram.dataBind();

  }

If we misunderstood your requirement, then please share us a simple sample replicating issue or modify the above sample illustrating issue with issue replication steps. This would help us to serve you better.

Regards

Aravind Ravi

[Reuvain Levin]

Hi  Aravind,

Thanks for the response.

What I'm trying to do is similar, I just want the button to be inside of every node.

Here I have a stackblitz https://stackblitz.com/edit/angular-wgeaba-tiojcm?file=app/diagram/diagram-display/diagram-display.component.ts

As you can see here when I call the toggle function it stops working after 2 clicks

Thank you

[Aravind Ravi]

Hi Reuvain,

We have modified the sample to perform expand / collapse the nodes in layout. In the diagram module do not inject the LayoutAnimationService module in the diagram. Please find the modified sample in below link

Sample: https://stackblitz.com/edit/angular-wgeaba-hayvhx

Regards

Aravind Ravi

[Reuvain Levin]

Hi  Aravind,

That made it work,

Thanks for you help!

[Aravind Ravi]

Hi Reuvain,

Most Welcome.

Regards

Aravind Ravi