How to Integrating Syncfusion Blazor Diagram with Overview Support in SfTab Component?

This guide explains how to integrate the Syncfusion® Blazor Diagram with Overview inside the Syncfusion.Blazor.Tab component. This setup enables users to view and navigate diagrams within a tabbed interface for enhanced accessibility and organization.

Steps to Implement:

1. Create a Blazor Server Application
Begin by creating a Blazor Server application. Follow the instructions here to set up your project.

2. Set Up the Razor Page.
Create a new Razor component and import the necessary Syncfusion® Blazor namespaces for navigation and diagram functionalities:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Overview 

3. Add the SfTab Component:
Implement the SfTab component with two tabs. The first tab will contain the diagram and overview, while the second tab displays information about the diagram.

<SfTab LoadOn="ContentLoad.Demand">
   <TabItems>
       <TabItem>
           <HeaderTemplate>Diagram</HeaderTemplate>
           <ContentTemplate>
               @if (canRender)
               {
                   <div id="overviewdiagram" style="width: 1200px;height: 500px;">
                       <div style="width:900px;height: 500px; float:left">
                           <SfDiagramComponent @ref="@Diagram" ID="element" Width="900px" Height="500px"  ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
                               <DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource"> </DataSourceSettings>
                                   <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="30" Orientation="LayoutOrientation.TopToBottom" VerticalSpacing="30" HorizontalAlignment="HorizontalAlignment.Auto" VerticalAlignment="VerticalAlignment.Auto" GetLayoutInfo="GetLayoutInfo">
                                       <LayoutMargin Top="50" Bottom="50" Right="50" Left="50"></LayoutMargin>
                                   </Layout>
                               <ScrollSettings ScrollLimit="ScrollLimitMode.Infinity"></ScrollSettings>
                           </SfDiagramComponent>
                       </div>
                       <div style="width:300px;height:200px;float:left; border-color:lightgray;border-style:solid;">
                           <SfDiagramOverviewComponent Height="300" Width="300" SourceID="element"></SfDiagramOverviewComponent>
                       </div>
                   </div>
               }
           </ContentTemplate>
       </TabItem>
       <TabItem Content="C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.">
           <ChildContent>
               <TabHeader Text="C Sharp(C#)"></TabHeader>
           </ChildContent>
       </TabItem>
   </TabItems>
   <TabEvents Created="@tabCreated"></TabEvents>
</SfTab>

• SfDiagramComponent: Renders the main diagram within the first tab.
• SfDiagramOverviewComponent: Provides an overview of the diagram, enhancing navigation for large diagrams by displaying a smaller representation in the tabbed interface.

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to Integrate Syncfusion® Blazor Diagram with overview support in the SfTab component.

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!