How to create a palette and a diagram in the same Razor component by combining two separate Razor files?

This guide provides a step-by-step process to merge a symbol palette and a diagram into a single Razor component by integrating two distinct Razor files. This configuration allows for effective interaction between the palette and the diagram, enabling the palette to reference and manipulate the diagram seamlessly.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here:Create Blazor Server application

Steps to Merge Components

Step 1: Create the Custom Symbol Palette Component
Define your custom symbol palette in a Razor file named CustomSymbolPalette.razor. Here’s an example:

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@using System.Collections.ObjectModel 

<SfSymbolPaletteComponent @ref="palette">
   <!-- Define palette items here -->
</SfSymbolPaletteComponent>

@code {
    public SfSymbolPaletteComponent PaletteInstance;
   
   protected override void OnInitialized()
   {
       // Initialize palette items or configurations here
   }
} 

Step 2: Create the Custom Diagram Component
Similarly, create your custom diagram component in another Razor file named CustomDiagram.razor:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="diagram">
   <!-- Define diagram items here -->
</SfDiagramComponent>

@code {
   internal SfDiagramComponent diagram;
   
   protected override void OnInitialized()
   {
       // Initialize diagram settings or items here
   }
} 

Step 3: Combine the Components in a Main Razor Page
Use the main Razor page, typically Index.razor, to combine the symbol palette and diagram components:

<div>
   <div style="float:left">
       <CustomSymbolPalette @ref="@symbolpalette">

       </CustomSymbolPalette>
   </div>
   <div>
       <CustomDiagram @ref="@diagram">

       </CustomDiagram>
   </div>
</div>



@code {
   internal CustomDiagram diagram;
   internal CustomSymbolPalette symbolpalette;
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       symbolpalette.diagram = diagram;
       await base.OnAfterRenderAsync(firstRender);

   }
} 

Explanation

• CustomSymbolPalette.razor and CustomDiagram.razor: Define your components separately, ensuring clear organization and modularity.
• Index.razor: Combines the two components. The OnAfterRenderAsync method establishes a connection between the CustomSymbolPalette and CustomDiagram by assigning the diagram property.

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to create a palette and a diagram in the same Razor component by combining two separate Razor files.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

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