expand or collapse till specific node with given node Id in Complex hierarchical tree layout structure complex.

[Geeta]

Currently , I am not able to find a way to initially expand or collapse till particular node with given node id or some unique identity in complex hierarchical tree layout structure. I am using ejs-diagram component to create the chart.

Also I have attached the code for reference. Please share any update regarding the same.

Attachment: syncfusionchart_9a405d21.zip

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample to meet your requirements. Based on the provided snippet, it seems you attempted to retrieve the node by an ID which is a property of the data. Please note that the nodes rendered in the layout are generated with random IDs and not with the IDs provided in the data. In your case, to retrieve the node, iterate through the nodes collection, check the data in each node, and compare the ID you provided with the data property (e.g., "Name" in your case). If it matches, retrieve the node. To expand or collapse the node, kindly use the isExpanded property of the node. Please refer to the provided sample for further reference, which demonstrates collapsing a node. Based on that, implement recursion in your application.

Sample

https://stackblitz.com/edit/angular-7msb8d-qnjdu6?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,
Moulidharan

[Geeta]

Thankyou Moulidharan, it works for me.

[Preethi Rajakandham]

Hi Geeta,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R

[DHEERAJ PANDEY]

Hi  Moulidharan,

I am working on same requirement with some extra points, I have to add expand icon to each node (doesn't matter's if there are some child node or not) so that on expand event i can fetch data from API and bind (to apply lazy loading)

Please help me to get it done.

Thanks.

[Moulidharan Gopalakrishnan]

Hi Dheeraj,

Please note that the expand and collapse icon options are specifically available for nodes with relationships and are used to process expand and collapse operations in the Layout.

If you need an icon for a node, regardless of whether it has child nodes, you can use the fixedUserHandle property of the node to define the icon. You can then bind the onFixedUserHandleMouseDown or click event to trigger actions, such as fetching data from an API based on your requirements. Please refer to the documentation for further guidance.

Documentation: Fixed User handle in Angular Diagram component | Syncfusion

Regards,
Moulidharan