How to Add Rectangle Boxes Under Layout Nodes in JavaScript Diagram?

In Syncfusion® JavaScript Diagram, you can dynamically add rectangle-shaped nodes during runtime by utilizing the add method. To create these nodes, the shape property is used, where the type is set to Basic and the shape is set to Rectangle. This allows you to add new rectangle nodes to the diagram at specific positions with custom spacing.

The following code snippet demonstrates how to add extra rectangle boxes below existing nodes during runtime

// Function to dynamically add new nodes 
function addNodes() {
   var existingNodesCount = diagram.nodes.length;
   var newNodes = [];
   
   var horizontalSpacing = 60; // Adjusted horizontal space between new nodes
   var verticalSpacing = 40;   // Adjusted vertical space between new nodes

   for (var i = 0; i < existingNodesCount; i++) {
       var existingNode = diagram.nodes[i];

       // Ensure that the newly added nodes are always below the existing nodes
       var xPos1 = existingNode.offsetX - horizontalSpacing;
       var yPos1 = existingNode.offsetY + verticalSpacing;  

       var xPos2 = existingNode.offsetX + horizontalSpacing;
       var yPos2 = existingNode.offsetY + verticalSpacing; 

       // Create new nodes with adjusted positions and annotations
       var newNode1 = {
           id: 'node' + (existingNodesCount + i + 2),
           offsetX: xPos1, // Adjust horizontal position for new node
           offsetY: yPos1, // Ensure below the existing node
           width: 30,  // Node width as per the design
           height: 5,  // Node height
           shape: { type: 'Basic', shape: 'Rectangle' },
           style: { fill: '#357BD2', strokeColor: 'white' }, // Node color
           annotations: [{
               content: 'Node ' + (existingNodesCount + i + 1),
               style: {
                   color: 'white',
                   fill: 'transparent',
                   bold: true,
                   fontSize: 12
               }
           }]
       };

       var newNode2 = {
           id: 'node1' + (existingNodesCount + i + 2),
           offsetX: xPos2, // Adjust horizontal position for new node
           offsetY: yPos2, // Ensure below the existing node
           width: 30,  // Node width as per the design
           height: 5,  // Node height
           shape: { type: 'Basic', shape: 'Rectangle' },
           style: { fill: '#357BD2', strokeColor: 'white' }, // Node color
           annotations: [{
               content: 'Node ' + (existingNodesCount + i + 2),
               style: {
                   color: 'white',
                   fill: 'transparent',
                   bold: true,
                   fontSize: 12
               }
           }]
       };

       // Add the newly created nodes to the diagram
       diagram.add(newNode1);
       diagram.add(newNode2);
       newNodes.push(newNode1, newNode2);
   }
} 

The function adds new rectangle nodes below existing ones, using offsetX and offsetY to position them correctly. The horizontalSpacing controls the distance between nodes along the x-axis, while verticalSpacing adjusts the distance between nodes along the y-axis.

Sample : Click here for sample

Conclusion
I hope you enjoyed learning how to add extra rectangle boxes under nodes at runtime in JavaScript diagram
You can refer to our JavaScript 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 JavaScript 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!