How to add child to existing Group node dynamically at runtime in React Diagram?

This article explains how to dynamically add a child to an existing group node at runtime in the Syncfusion® React Diagram component. In the diagram, group nodes can be added to the symbol palette. The following code demonstrates how to create a group node.

{
       // Size of the node.
       id: "html",
       width: 100,
       height: 100,
       shape: {
           type: 'HTML',
           content: '<div style="background: #6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px">Group node</button></div>'
       },
   },
   {
       // Size of the node.
       id: "grp",
       children: ['html'],
       shape: {
           type: 'HTML',
       }
   } 

When nodes are dragged and dropped onto the diagram from the palette, the collectionChange event is triggered. The event iterates through all the nodes and checks if the bounds of the dropped node intersect with any existing nodes in the diagram. If an intersection is detected, it further checks whether the intersected node contains child nodes. If the intersected node has child nodes, the dragged node is added to the group node dynamically.

   const collectionChange=(args) => {
       if(args.state === 'Changed'){
           dropFn(args);
           if((args.element ).children !== undefined){
             (args.element ).width = 300;
             (args.element ).height = 200;
           }
           diagramInstance.dataBind();
         }
   }

   function dropFn(args){
       let tar;
       for(let i = 0;i<diagramInstance.nodes.length;i++){
         let node = args.element;
         let r1 = node.wrapper.bounds;
         let r2 = diagramInstance.nodes[i].wrapper.bounds;
           if(!(r2.left >= r1.right || r2.right <= r1.left ||
               r2.top >= r1.bottom || r2.bottom <= r1.top)){
                 if(diagramInstance.nodes[i].children !== undefined){
                   tar = diagramInstance.nodes[i];
                 }
               }
       }
       if(tar && (tar ).children  !== undefined ){
           if((args.element).id !== (tar ).id){
               if((tar ).children.indexOf((args.element ).id)===-1){
                   diagramInstance.addChild((tar ),(args.element ).id);
               
               }
           }
       }
   } 

Please refer to the working sample for reference,
Sample

Conclusion
I hope you enjoyed learning how to add child to existing Group node dynamically at runtime in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!