We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to group all shapes inside another shape?

Thread ID:

Created:

Updated:

Platform:

Replies:

149344 Nov 22,2019 06:24 AM UTC Nov 25,2019 04:40 AM UTC Angular - EJ 2 1
loading
Tags: Diagram
SaiSravya
Asked On November 22, 2019 06:24 AM UTC

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

Shyam G [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon