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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom shape

Thread ID:





149178 Nov 18,2019 05:09 AM UTC Nov 22,2019 04:47 AM UTC Angular - EJ 2 3
Tags: Diagram
Asked On November 18, 2019 05:09 AM UTC

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

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

Replied On 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

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


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