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


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?


7 Replies

NG Naganathan Ganesh Babu Syncfusion Team February 7, 2020 07:10 AM

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 

MA Manuel February 7, 2020 07:15 AM

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.

NG Naganathan Ganesh Babu Syncfusion Team February 10, 2020 01:31 AM

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 

MA Manuel February 10, 2020 05:48 AM


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.


NG Naganathan Ganesh Babu Syncfusion Team February 11, 2020 06:45 AM

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 

MA Manuel February 23, 2020 03:41 AM

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).

AR Aravind Ravi Syncfusion Team February 24, 2020 03:48 AM

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 

Live Chat Icon For mobile
Up arrow icon