Custom shape

[SaiSravya]

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]

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'] 

    } 

  ] 

Sample: https://stackblitz.com/edit/angular-lpipg9?file=app.component.ts 

Here is an help documentation of a group node. 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/group/?no-cache=1 

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

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/ 

Regards, 

Shyam G 

[SaiSravya]

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]

Hi SaiSravya, 

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/groupsample1380447003 

Regards, 

Shyam G