How to Adjust Diagram Size When Sidebar is Toggled in Blazor?

This article demonstrates how to dynamically adjust the size of a Syncfusion Blazor Diagram when toggling a collapsible sidebar in a Blazor application. By programmatically triggering a window resize event after the sidebar state changes, you can ensure the diagram automatically adapts to the updated layout, maintaining a responsive and seamless user experience.

The guide provides step-by-step instructions, including creating a flexible layout with a collapsible sidebar, integrating the Syncfusion Diagram component, and ensuring the diagram resizes correctly whenever the sidebar is expanded or collapsed.

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

Implementation steps:

Step 1: Create the Component Structure
First, set up your Blazor component with the Syncfusion Diagram and a toggleable sidebar:

@page "/"
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Diagram
@inject IJSRuntime jsRuntime;

<style>
   .parent {
       display: flex;
       height: 600px;
       width: 1000px;
       border: 1px solid #ccc;
   }
   .sideBar {
       width: 200px;
       height: 100%;
       background-color: #f0f0f0;
   }
   .hidden {
       display: none
   }
</style>

<div class="parent">
   <SfDiagramComponent @ref="diagram" Width="100%" Height="100%">
       <RulerSettings>
           <HorizontalRuler></HorizontalRuler>
           <VerticalRuler></VerticalRuler>
       </RulerSettings>
   </SfDiagramComponent>
   @if (sidebarVisible)
   {
       <div class="sideBar"></div>
   }
</div>

<div>
   <SfButton @onclick="ToggleSidebar" Content="Toggle Sidebar">
   </SfButton>
</div>

@code {
   //Reference the diagram
   private SfDiagramComponent? diagram;
   private bool sidebarVisible = false;
   
   // To toggle the sidebar visibility and invoke a JS function to update the diagram size.
   private async Task ToggleSidebar()
   {
       sidebarVisible = !sidebarVisible;
       await jsRuntime.InvokeAsync<object>("UpdateWindow").ConfigureAwait(true);
   }
} 

Step 2: Add JavaScript Interop Function
Create a JavaScript file (e.g., wwwroot/js/diagramHelper.js) with a function to trigger the window resize event:

function UpdateWindow() {
   window.dispatchEvent(new Event('resize'));
} 

Step 3: Reference the JavaScript File
Add a reference to your JavaScript file in your _Host.cshtml (for Server-side Blazor) or index.html (for WebAssembly):

<script src="js/diagramHelper.js"></script> 

How It Works

• Flexible Layout: The parent container uses a flex layout to arrange the diagram and sidebar horizontally.
• Conditional Rendering: The sidebar is conditionally rendered based on the sidebarVisible state.
• Resize Trigger: When the sidebar is toggled, we call the JavaScript function UpdateWindow() which dispatches a window resize event.
• Automatic Adjustment: The Syncfusion Diagram component automatically responds to window resize events, recalculating its dimensions based on the available space.

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning How to Adjust Diagram Size When Sidebar is Toggled in Blazor.

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, Direct-Trac,, or feedback portal. We are always happy to assist you!