How to Increase the Width When Resize the Splitter in Blazor Diagram?

This article demonstrates how to dynamically adjust the width of a Syncfusion Blazor Diagram when resizing a Syncfusion Blazor splitter in a Blazor application. By leveraging the OnResizeStop event of the splitter, you can ensure the diagram automatically adapts to changes in pane size, maintaining a seamless and responsive layout.
The guide provides step-by-step instructions, including configuring the splitter with multiple panes, integrating the diagram in a specific pane, and dynamically updating its dimensions during resizing events.

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: Configure the Splitter Component

Define a horizontal splitter with three panes, placing the diagram in the middle pane.

@page "/"

@using SplitterOrientation = Syncfusion.Blazor.Layouts.Orientation

<div>Horizontal Splitter</div>
<div style="margin:0;padding:0;height:600px;width:100%;">
   <SfSplitter @ref="@Splitter" CssClass="out-splitter" Height="100%" Width="100%" SeparatorSize="4" Orientation="@SplitterOrientation">
       <SplitterEvents OnResizeStop="@OnSplitterResizeStopHandler"></SplitterEvents>
       <SplitterPanes>
           <SplitterPane Size="25%" Min="60px">
               <ContentTemplate>
                   <div>Left Pane</div>
               </ContentTemplate>
           </SplitterPane>
           <SplitterPane Size="50%" Min="60px">
               <ContentTemplate>
                   <SfDiagramComponent @ref="Diagram" Height=@dHeight Width=@dWidth></SfDiagramComponent>
               </ContentTemplate>
           </SplitterPane>
           <SplitterPane Size="25%" Min="60px">
               <ContentTemplate>
                   <div>Right Pane</div>
               </ContentTemplate>
           </SplitterPane>
       </SplitterPanes>
   </SfSplitter>
</div> 

Step 2: Handle the Resizing Event

Implement the to dynamically adjust the diagram’s width or height when the splitter is resized.

The OnResizeStopHandler method is triggered whenever the user resizes the splitter. This method adjusts the dimensions of the diagram component dynamically based on the size of its containing pane.
Identify the resized pane: The ResizingEventArgs object provides the index of the resized pane. In this case, the middle pane (containing the diagram) is at index 1.
Adjust the dimensions: Depending on the splitter orientation (Horizontal or Vertical), the width or height of the diagram is updated using the resized pane’s size.
Fine-tune dimensions: A small value (e.g., -2px) is subtracted from the pane size to account for splitter separators or margins.

@code{
   string dHeight = "100%";
   string dWidth = "100%";
   SfDiagramComponent Diagram;
   SfSplitter Splitter;
   SplitterOrientation SplitterOrientation = SplitterOrientation.Horizontal;

   public void OnSplitterResizeStopHandler(ResizingEventArgs args)
   {
       int index = 0;
       if (args.Index != null)
       {
           for (int i = 0; i < args.Index.Length; i++)
           {
               if (args.Index[i] == 1)
               {
                   // Index of the diagram pane based on the order of rendering
                   index = i;
               }
           }
       }
       if (SplitterOrientation == SplitterOrientation.Horizontal)
       {
           dWidth = (args.PaneSize[index] - 2).ToString() + "px";
       }
       else
       {
           dHeight = (args.PaneSize[index] - 2).ToString() + "px";
       }
   }
} 

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to increase the width when resize the splitter in Blazor Diagram.

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!