1. Home
  2. Forum
  3. Blazor
  4. Custom Palette Symbol Size

Custom Palette Symbol Size

Hi,

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?

Regards
Manuel

7 Replies
NG Naganathan Ganesh Babu Syncfusion Team 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"  
                              ExpandMode="@ExpandMode.Multiple" 
                              SymbolInfo="@SymbolInfo"> 
                <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin> 
                <SymbolPalettePalettes> 
                    <SymbolPalettePalette Id="flowShapePalette" Expanded="true" Symbols="@FlowShapeList" IconCss="e-ddb-icons e-flow" Title="Flow Shapes"> 
                    </SymbolPalettePalette> 
                    <SymbolPalettePalette Id="connectorPalette" Expanded="true" Symbols="@ConnectorList" IconCss="e-ddb-icons e-connector" Title="Connectors"> 
                    </SymbolPalettePalette> 
                </SymbolPalettePalettes> 
            </EjsSymbolPalette> 
 
 
 
Regards, 
 
Naganathan K G 


MA Manuel 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.

NG Naganathan Ganesh Babu Syncfusion Team 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 } 
}; 
FlowShapeList.Add(diagramNode); 
} 
 
 
 
  
  
  
 
Regards, 
 
Naganathan K G 


MA Manuel February 10, 2020 10:48 AM UTC

Hi,

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.

Regards
Manuel

NG Naganathan Ganesh Babu Syncfusion Team 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.  

Regards, 

Naganathan K G 


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



AR Aravind Ravi Syncfusion Team 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>   
   
            <SymbolPalettePalettes>   
                <SymbolPalettePalette Id="flow" Expanded="true" Symbols="@flowShapes" IconCss="e-ddb-icons e-flow" Title="Flow Shapes">   
                </SymbolPalettePalette>   
                   
            </SymbolPalettePalettes>   
   
   
   
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.   
   
Regards   
Aravind Ravi 
 


Loader.
Up arrow icon