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 Palette Symbol Size

Thread ID:





151299 Feb 6,2020 07:46 AM UTC Feb 24,2020 08:48 AM UTC Blazor 7
Tags: Diagram
Asked On February 6, 2020 07:46 AM UTC


currently i'm adding my DiagramNodes directly to the SymbolPalette to make them available for usage.
The problem i got here is, that the Palette is resizing them to the given SymbolWidth and SymbolHight (60x60).
So a DiagramNode with a size of 200x120 becomes a size of 60x60 in the palette.

Is there any option to set a symbol size for a DiagramNode in the Palette?


Naganathan Ganesh Babu [Syncfusion]
Replied On February 7, 2020 12:10 PM UTC

Hi Manuel, 
Please remove symbolWidth and symbolHeight properties from the symbol palette, so that the specified node width and height value will be rendered in symbol palette. 
The Code example we have initialized the symbolpalette without symbolWidth and symbolHeight properties: 
<EjsSymbolPalette id="symbolPalette" Width="100%" Height="700px"  
                <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin> 
                    <SymbolPalettePalette Id="flowShapePalette" Expanded="true" Symbols="@FlowShapeList" IconCss="e-ddb-icons e-flow" Title="Flow Shapes"> 
                    <SymbolPalettePalette Id="connectorPalette" Expanded="true" Symbols="@ConnectorList" IconCss="e-ddb-icons e-connector" Title="Connectors"> 
Naganathan K G 

Replied On February 7, 2020 12:15 PM UTC

Thank you, but than all symbols in the palette are getting the dimension of the shapes.
I'd like to set the symbol size for each shape in the palette separately.

Naganathan Ganesh Babu [Syncfusion]
Replied On February 10, 2020 06:31 AM UTC

Hi Manuel, 
Sorry for inconvenience caused. 
As we informed earlier, please remove the symbolpalette’s  SymbolHeight and SymbolWidth properties, so that each symbols will render with user defined width and height in the symbol palette as shown in the below image. Please refer to the below code example and sample. 
Code example: 
private void InitPaletteModel() 
SymbolInfo = new SymbolInfo() { Fit = true }; 
FlowShapeList = new ObservableCollection<DiagramNode>(); 
CreatePaletteNode(FlowShapes.Terminator, 100, 100); 
CreatePaletteNode(FlowShapes.Process, 150, 150); 
ConnectorList = new ObservableCollection<DiagramConnector>(); 
CreatePaletteConnector("Link1", DiagramSegments.Orthogonal, DecoratorShapes.Arrow); 
CreatePaletteConnector("Link2", DiagramSegments.Orthogonal, DecoratorShapes.None); 
private void CreatePaletteNode(FlowShapes flowShape, float width, float height) 
DiagramNode diagramNode = new DiagramNode() 
Width = width, 
Height = height, 
Id = flowShape.ToString(), 
Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = flowShape } 
Naganathan K G 

Replied On February 10, 2020 10:48 AM UTC


thanks for your help, but maybe i did not descriped my problem well enought.
The situation i have is, that my palette symbols have to be much smaller than
the nodes i'd like to drop to the diagram. When i modify the palette symbol
width and heigth i lose the format relation the shapes have and when i modify
the node heigth and width directly they are to small when i drop them to the diagram.

I need a solution where  the nodes automatically fitting the palette symbol max height
and max width i set before, without losing it's dimensions. So a rectangle stays as rectangle
and a square stays as square.


Naganathan Ganesh Babu [Syncfusion]
Replied On February 11, 2020 11:45 AM UTC

Hi Manuel, 

The symbol palette item renders with the user defined width and height and it doesn’t loses its dimensions. Also, when we drag a node from the palette onto the diagram, the node size will be same as the symbol size. Please refer to a below video for more details. 

If we misunderstood your requirement, please share us more details such as modify the below sample or video to demonstrate the issue.  


Naganathan K G 

Replied On February 23, 2020 08:41 AM UTC

Hi, thanks for your response. I made a screenshot for better understanding.
I dropped all symbols i have on my palette to the diagram.
As you can see, the symbols in the palette have to be much smaller than
the shapes on the diagram. But everything i tried to fit this requirement,
ends in losing the dimensions for my rectangles (white and yellow shapes).

Aravind Ravi [Syncfusion]
Replied On February 24, 2020 08:48 AM UTC

Hi Manuel,   
We suspect that the issue occurs due to you have set the symbol preview height and width for palette symbols. If you set symbol preview height and width for symbols, then the node will be rendered in a diagram based on symbol preview height and width. We suggest you to remove the symbol preview height and width from palettes.   
Please remove the below highlighted code from your sample and also refer the below sample.  
<EjsSymbolPalette @ref="palette" id="palettes" Width="100%" Height="700px" ExpandMode="Syncfusion.EJ2.Blazor.Navigations.ExpandMode.Multiple">   
            <SymbolPaletteSymbolPreview Height="100" Width="100"></SymbolPaletteSymbolPreview>   
            <SymbolMargin Left="12" Right="12" Bottom="12" Top="12"></SymbolMargin>   
                <SymbolPalettePalette Id="flow" Expanded="true" Symbols="@flowShapes" IconCss="e-ddb-icons e-flow" Title="Flow Shapes">   
If the issue still exists, then please share your sample project or code snippet of how do you create symbol palette. This will help us to serve you better.   
Aravind Ravi 


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