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. Image for the cookie policy date

Custom shape

Can we have our own shapes in the symbol palette?

If yes please provide a sample code

Refer the attachment. I need a symbol which is in the attachment inside the symbol palette. So that user will be able to drag and drop the shapes

Attachment: custom_shape_53bd8d01.rar

3 Replies

SG Shyam G Syncfusion Team November 19, 2019 01:53 PM UTC

Hi SaiSravya, 

On locking into your screenshot,  the requirement can be achieved using our group node. We have created a sample to render group node in the diagram and symbol palette. Please refer to a code example and sample below. 

Code example: 
  public nodes: NodeModel[] = [ 
      id: 'nodeA', width: 200, height:30, offsetX:200,offsetY:200, style: {fill:'Magenta',strokeColor: 'Magenta'} 
      id: 'nodeB', width: 200, height:100, offsetX:200,offsetY:270, style: {fill:'red', strokeColor:'red'}, 
      annotations: [{content: 'No i have few queries', style: {fontSize:14}}] 
    //create group node 
      id:'Group', children: ['nodeA', 'nodeB'] 

Here is an help documentation of a group node. 

Here is an help documentation to know more about shapes in our diagram control. 

Shyam G 

SA SaiSravya November 21, 2019 11:12 AM UTC

Grouping is not working fine for me . Please refer the screenshot. 

The code which you people are sharing are not working in local. Please help me on this asap

I want a blank diagram space without any shapes on it. Please help me on this even

Attachment: Grouping_327b86fb.rar

SG Shyam G Syncfusion Team November 22, 2019 04:47 AM UTC

Hi SaiSravya, 

We have created a group sample locally and you can download it from the link below. 

Shyam G 

Live Chat Icon For mobile
Up arrow icon