1. Home
  2. Forum
  3. Blazor
  4. How to draw custom shapes for symbol palette and diagram

How to draw custom shapes for symbol palette and diagram

Hi Team, 

In the symbol palette we will show a icon. when user will drag and drop in diagram canvas we want to show a template, which will have all the features a diagram node has. 

Example Image - 


Could you please guide how to achieve the same?

Thanks, 
Ankit S

8 Replies 1 reply marked as answer
GG Gowtham Gunashekar Syncfusion Team February 25, 2021 02:22 PM UTC

Hi Ankit, 
 
We have added a sample link, in that sample we have render a image node in the symbol palette and while drag and drop the image node from the palette to diagram, we cancel the node addition using the OnDrop event and add  the button html template node to the diagram, you can use whatever temple instead of button component and achieve your requirement. 
 
 
 
Regards,  
Gowtham. 



Marked as answer
AS Ankit Sarkar February 25, 2021 03:22 PM UTC

Hey Gowtham,
Certainly this helps! Thanks for the demo. 

As per my understanding if we put HTML, we will not be able to export as image, Is it possible to put SVG instead of HTML?

Thanks, 
Ankit S

NG Naganathan Ganesh Babu Syncfusion Team February 26, 2021 03:04 PM UTC

Hi Ankit, 
 
We can’t provide the SVG elements directly into the diagram’s template rendering. however, we can achieve your requirement into some modification in sample side to render the SVG element as a template. Please refer to the below our online KB documentation link. 
 
 
Regards, 
Naganathan K G 


AS Ankit Sarkar February 27, 2021 04:51 AM UTC

Thanks Team! I will look into it. 

One more question, While I am resizing the diagram, html content is not resizing. Is there any way to achieve the same functionality like basic shapes?

SK Senthil Kumar Venkatesan Syncfusion Team March 1, 2021 01:51 PM UTC

Hi Ankit , 
We are validating your requirement . We will provide you with further details in 2 business days (3rd march 2021) . We appreciate your patience untill then . 
  
  
Regards, 
Senthil Kumar V 


GG Gowtham Gunashekar Syncfusion Team March 3, 2021 01:43 PM UTC

Hi Ankit ,  
 
While resizing the node, the template is not resize with respect to node. It’s the actual behavior of the HTML template. You have to handle it by yourself by updating the template dynamically while resizing the node, because the HTML template is not scalable by default. 
    
Regards, 
Gowtham 


VK Venkataraju Kattamuri August 10, 2021 09:53 AM UTC

Hi, 

I am very new to Syncfusion and Blazor.

Can I add SfCard in Symbol Palatte? If yes, can you please guide how to do that?


Thanks,

Venkat.


GG Gowtham Gunashekar Syncfusion Team August 11, 2021 12:03 PM UTC

Hi Venkataraju, 
 
Currently we don’t have Support to add HTML nodes in the symbol Palette. We have logged “Support to add HTML nodes in the symbol palette” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.      
  
You can track the feature status from the below link   
  
 
 
We suggest you render an image node in the symbol palette and when drag and drop image node into the diagram the Drop event will trigger in that event, we can cancel the addition of the image node and add the HTML node in that place where we dropped the image node into the diagram. We have added the sample for your reference.  
 
 
Regards, 
Gowtham. 


Loader.
Up arrow icon