group node on drop

[Jean Caiza]

Hello,

Is there a way to drag a node from the SymbolPalette and add it on top of another node in the Diagrammer, grouping and staying in position, similar to SwimLane behavior?


Regards

[Vivisa Ganesan]

Hi,

We already have a Knowledge Base article for adding the node into the group while drag and drop from the palette. Please refer to the following KB for detailed instructions.

KB:

https://support.syncfusion.com/kb/article/13364/how-to-drag-a-node-from-palette-and-drop-it-into-a-group-node-in-react-diagram

Regards,

Vivisa

[Jean Caiza]

Thanks for answering, it helped me a lot, although I have tried to recreate it in the same way so that when the nodes that are already created initially drag it towards the grouped node and also drag it outside to be able to ungroup it, any ideas?

[Vivisa Ganesan]

Hi,

We have created the sample according to your requirements. In this sample, we have handled the removal of the node from the group in the `positionchange` event. Please refer to the example below:

Sample:

https://stackblitz.com/edit/react-rb9slu-ghvcaz?file=index.js,package.json

Regards,

Vivisa

[Jean Caiza]

Thanks, it works for me.

I have another question, is it possible to add grouped nodes from diagram.add() and then update the position (or offset)  of the grouped node without disordering the nodes that are within the grouping? is there any idea?

Regards

[Vivisa Ganesan]

Hi,

We have created the sample as per your requirement. Now, the group has been incorporated, and the position of the child node inside the group can be altered with a simple button click. Please refer the sample below.

Sample:

https://stackblitz.com/edit/react-fuy32p-sqyoyu?file=index.js,index.html

Regards,

Vivisa