How to Create a Blazor Application for Dragging and Dropping Symbols from a Palette into Multiple Diagrams?

This guide explains how to implement a Blazor application where users can drag symbols from a palette and drop them into multiple diagrams. The functionality uses Syncfusion’s Blazor Diagram components, enabling users to manage diagrams efficiently.

Implementation Steps

1. Set Up the Application
Create a Blazor application and install the Syncfusion® Blazor NuGet packages to access Diagram and Symbol Palette components. Follow the instructions here to set up your project.

2. Design the Layout
The application consists of a symbol palette and two diagrams. The palette allows user to drag symbols into either diagram. Here is the layout code:

<div style="width: 100%">
   <div id="palette-space" class="sb-mobile-palette">
       <SfSymbolPaletteComponent @ref="@PaletteInstance" Width="100%" Height="1000px"
                                 Palettes="@Palettes" SymbolDragPreviewSize="@SymbolDragPreviewSize"
                                 SymbolHeight="@symbolSizeHeight" SymbolWidth="@symbolSizeWidth">
       </SfSymbolPaletteComponent>
   </div>
   <div id="diagram-space" class="sb-mobile-diagram">
       <div class="content-wrapper" style="border: 1px solid #D7D7D7">
           <SfDiagramComponent @ref="@DInstance" Height="300px" Width="100%" Nodes="@Dnodes" Connectors="@Dconnectors">
           </SfDiagramComponent>
       </div>
   </div>
   <div id="diagram-space" class="sb-mobile-diagram">
       <div class="content-wrapper" style="border: 1px solid #D7D7D7">
           <SfDiagramComponent @ref="@DInstance1" Height="300px" Width="100%" Nodes="@Dnodes1" Connectors="@Dconnectors1">
           </SfDiagramComponent>
       </div>
   </div>
</div> 

3. Configure the Palette and Diagrams
Initialize the palette with flowchart symbols and configure the diagram components.

@code {
   DiagramSize SymbolDragPreviewSize = new DiagramSize { Width = 80, Height = 80 };
   double symbolSizeWidth = 50;
   double symbolSizeHeight = 50;

   SfSymbolPaletteComponent PaletteInstance;
   SfDiagramComponent DInstance, DInstance1;
   DiagramObjectCollection<Node> Dnodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Node> Dnodes1 = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> Dconnectors = new DiagramObjectCollection<Connector>();
   DiagramObjectCollection<Connector> Dconnectors1 = new DiagramObjectCollection<Connector>();
   DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       PaletteInstance.Targets = new DiagramObjectCollection<SfDiagramComponent> { DInstance, DInstance1 };
   }

   protected override void OnInitialized()
   {
       var symbols = new DiagramObjectCollection<NodeBase>
       {
           new Node { ID = "node1", Shape = new FlowShape { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } },
           new Node { Shape = new FlowShape { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Document } },
           new Node { Shape = new FlowShape { Type = NodeShapes.Flow, Shape = NodeFlowShapes.PreDefinedProcess } }
           // Add more nodes as needed
       };

       Palettes = new DiagramObjectCollection<Palette>
       {
           new Palette { Symbols = symbols, Title = "Flow Shapes", ID = "FlowShapes" }
       };
   }
} 

You can download a complete working sample here.

Conclusion:

This Blazor application demonstrates how to drag symbols from a palette and drop them into multiple diagrams. You can extend this functionality by customizing the palette or diagram behavior to suit your specific requirements.

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!