How to Set Symbol Size in the Palette and Increase Node Size When Dropped onto the Diagram in Blazor Application?

This guide explains how to resize symbols in the Symbol Palette and adjust node sizes when they are dropped onto the diagram in a Blazor application using Syncfusion® components.

Prerequisites:
Create a Blazor Server application by following this guide.

Steps to Configure Symbol and Node Resizing

1. Adjust Symbol Size in the Symbol Palette
To set the symbol size in the Symbol Palette, use the SymbolHeight and SymbolWidth properties of the SfSymbolPaletteComponent.

<SfSymbolPaletteComponent @ref="@symbolPalette" Height="535px" Width="200px"
                         Palettes="@palettes" SymbolHeight="30" SymbolWidth="30"
                         SymbolMargin="@symbolMargin" NodeCreating="NodeCreating">
</SfSymbolPaletteComponent> 

This configuration sets each symbol’s height and width to 30 pixels, controlling the display size within the Symbol Palette.

2. Increase Node Size on Drop to Diagram
To resize a node after it’s dropped onto the diagram, handle the DragDrop event of the SfDiagramComponent.

1. Define the SfDiagramComponentwith the DragDrop event.

<SfDiagramComponent @ref="diagram" Height="550px" Width="100%" DragDrop="DragDrop">
</SfDiagramComponent> 

2. In the code-behind, handle the DragDrop event to resize the node:

private void DragDrop(DropEventArgs args)
{
    if (args.Element is Node node)
   {
       node.Width = 100;
       node.Height = 100;
   }
} 

This logic checks if the dropped element is a node and resizes it to 100x100 pixels.

Output:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to set symbol size in the palette and increase node size when dropped onto the Diagram in a Blazor Application.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!