Custom Auto Layout

[dsoftware]

I would like to have nodes auto layout as they are dragged onto the the diagram from the palette.  However, I want them to auto layout in a list where my "continue nodes" are offset.  Right now I do this manually via:

newNode.offsetX = lastNode.offsetX;
newNode.offsetY = lastNode.offsetY + (lastNode.height * 2);

But, when a node in the middle of the "list"/diagram is deleted I'd need to re-adjust all the nodes manually again with some function.

Is there a way to create a custom Auto Layout?

If so, is it possible to have the layout auto update when I reconnect two nodes after one is deleted?

Attached are screenshots to help illustrate what I'm asking.

Thanks!

Attachment: AutoReLayout_b2251204.zip

[Aravind Ravi]

Hi Dsoftware, 

 

By default, in the diagram, if we arrange the node by using the offset position means if we delete any node means, then we want to manually arrange the other node’s position. When we add or delete the node, the node do not move automatically , if we do not use any layout in the diagram. We do not have any custom auto layout in the diagram. On node removal or node addition, we want to calculate the node and rearrange it position.  

 

Regards 

Aravind Ravi 

[dsoftware]

Aravind,

I'm not sure I completely follow, I realize that my question might not have been super clear.  Really what I need to know first is:

Is there a way to Auto Layout my nodes in the way shown in the attached image?

Attachment: Layout_69f89202.zip

[Aravind Ravi]

Hi Dsoftware, 

 

Yes, in the diagram, we have an autoLayout feature to arrange the nodes and connectors. Initialize all the nodes without offsetX and connect them by using the connectors. After that in diagram set layout, so based on the given layout, the nodes and connectors get arranged. 

 

For more information about layout, please refer to below UG documentation link 

 

UG Link: https://help.syncfusion.com/aspnetmvc/diagram/automatic-layout 

Already we have prepared a KB for how to perform drag and drop operation in organizational chart. Similarly you can refer this KB to create parent-child relationship for node when drag and drop the node from symbol palette to diagram. 

KB: https://www.syncfusion.com/kb/5885/how-to-perform-drag-and-drop-operation-in-orgchart 

Regards 

Aravind Ravi