How to Update HTML Node Size on HTML Template in Blazor Diagram?

This guide shows how to adjust the size of the HTML nodes in Syncfusion Blazor SfDiagram Component based on their node template. By rendering nodes as HTML elements, measuring their dimensions with JavaScript, and updating the node size in the diagram, the layout is dynamically adjusted. This ensures that nodes resize automatically to fit their content.

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: Define the Diagram Component
To begin, set up the SfDiagramComponent in your Blazor page. Install the required Syncfusion packages using the NuGet Package Manager or the following commands. Refer to the following UG documentation on how to define diagram component with template template and how to define a layout with data source

Step 2: Create JavaScript Utility for Content Measurement
To measure the size of the content in the nodes, you need a JavaScript function. This function will retrieve the offsetHeight and offsetWidth of each node, which are crucial for adjusting the diagram’s node size.
Add the following JavaScript function to your Blazor project’s wwwroot/index.html (for Blazor WebAssembly) or _Host.cshtml (for Blazor Server):

function GetHeightWidth(id) {
   const element = document.getElementById(id);

   if (element != null) {
       const height = element.offsetHeight.toString();
       const width = element.offsetWidth.toString();

       return height + "values" + width;
   }

   return null;
}

Step 3: Update Node Dimensions Dynamically
Once the node sizes are determined, you will need to update the SfDiagramComponent by setting the Width and Height of each node. This process requires executing JavaScript after the Blazor component has rendered. The OnAfterRenderAsync lifecycle method is used here to ensure that the HTML elements have been fully rendered before fetching their dimensions.

Here’s an example of how to implement this logic:

protected override async Task OnAfterRenderAsync(bool firstRender)
{

    if (!firstRender&&Diagram.Nodes != null && Diagram.Nodes.Count > 0 && isrender)
    {
        foreach (Node node in Diagram.Nodes) 
        {
            string id = node.ID + "HTML";
            // We need Some time to render HTML elements in the view. After that only we can get height and width of the div element. 
            await Task.Delay(1);
            var heightWidth = await JSRuntimeExtensions.InvokeAsync<string>(jsRuntime, "GetHeightWidth", id);
            if (heightWidth != null)
            {
                var split = heightWidth.Split("values");
                var NodeWidth = Convert.ToDouble(split[1]);
                node.Width = NodeWidth;
                var NodeHeight = Convert.ToDouble(split[0]);
                node.Height = NodeHeight;
            }
       
        }
        await Diagram.DoLayout();
        isrender = false;
    }
} 

Output:

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to update HTML node size on HTML template 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!