How to group all shapes inside another shape?

How do we group few shapes inside another shape. Please do refer the attachment.

When user drags 4 terminators to the diagram space he should be able to fit all those shapes inside a process as like in the screen shot

Same like grouping all the 4 terminators inside a process should be loaded in the diagram space


I need both the cases


Please do help me on this

Attachment: Group_in_a_shape_b3270ee2.rar

1 Reply

SG Shyam G Syncfusion Team November 25, 2019 04:40 AM UTC

Hi SaiSravya, 

We have created a group node with 4 terminators inside a process shape. Please refer to a code example and sample below. 

Code example: 
  // define nodes 
  public nodes: NodeModel[] = [ 
   
      id: 'Process', width: 200, height:300, offsetX:200,offsetY:300, style: {fill:'grey',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Process' }, 
    }, 
   
      id: 'nodeA', width: 200, height:50, offsetX:200,offsetY:200, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 
      annotations: [{content: 'Will i be sent', style: {fontSize:14}}] 
    }, 
   
      id: 'nodeB', width: 200, height:50, offsetX:200,offsetY:270, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 
      annotations: [{content: 'What timezone', style: {fontSize:14}}] 
    }, 
   
      id: 'nodeC', width: 200, height:50, offsetX:200,offsetY:340, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 
      annotations: [{content: 'Can i register', style: {fontSize:14}}] 
    }, 
   
      id: 'nodeD', width: 200, height:50, offsetX:200,offsetY:410, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 
      annotations: [{content: 'Is this a virtual', style: {fontSize:14}}] 
    }, 
    //create group node 
   
      id:'Group', children: ['Process', 'nodeA', 'nodeB', 'nodeC', 'nodeD'] 
    }  
  ]; 

 

Regards, 
Shyam G 


Loader.
Up arrow icon