How to Make HTML Node Resizable but not Draggable in Blazor Diagram?

In Syncfusion® Blazor Diagram, nodes are typically resizable and draggable by default. However, you may want to make an HTML node resizable while disabling its dragging functionality. This can be useful in scenarios where you want users to resize nodes dynamically but maintain a fixed position for layout stability.
This guide demonstrates how to create resizable HTML nodes in the SfDiagramComponent, restrict their movement with constraints property, and leverage JavaScript interop for smooth resizing, giving you enhanced control and usability for your diagrams.

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 the following Ug documentation on how to define diagram component with template template

Step 2: Define the HTML Node Component
Create an HTML node component that will contain the content for the node. This component will also handle the resizing logic for the node using JavaScript interop.

@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@using System.Threading.Tasks
@namespace DiagramSample.Pages
@using ChangeEventArgs = Microsoft.AspNetCore.Components.ChangeEventArgs
@inject IJSRuntime JSRuntime

<div class="my-auto mx-auto rounded-3 border border-dark border border-2" style="width:100%;height:100%;">

   <textarea id="@Id" style="width: 100%; height: 100%; overflow-x: auto; resize: none; " @oninput="AdjustTextAreaHeight">   @StringToHtml(textboxValue);</textarea>

</div>

@code {
   [Parameter]
   public string Id { get; set; }

   [Parameter]
   public Node Parent { get; set; }

   private string textboxValue = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Duis rhoncus facilisis mi non finibus.</strong> Donec dictum ac sapien sed auctor. Nulla nec efficitur purus. In ac lacus eros. Donec et.";

   RenderFragment StringToHtml(string htmlString)
   {
       return new RenderFragment(b => b.AddMarkupContent(0, htmlString));
   }
   private async Task AdjustTextAreaHeight(ChangeEventArgs e)
   {
       var result = await JSRuntime.InvokeAsync<Dictionary<string, double>>(
           "textAreaResize", Id);

       if (result != null && result.ContainsKey("height") && result.ContainsKey("width"))
       {
           var height = result["height"];
           var width = result["width"];
           Parent.Height = Convert.ToDouble(height);

       }
   }
} 

Steps 3: JavaScript for Resizing
Add the following JavaScript function in your wwwroot/index.html or _Host.cshtml file to handle the resizing logic. This will allow the textarea to resize based on the content while respecting container boundaries.

window.textAreaResize = (elementId) => {
   const textarea = document.getElementById(elementId);
   const height = textarea.scrollHeight;
   const width = textarea.scrollWidth;
 const container = textarea.parentElement;
   
   textarea.style.height = 'auto'; // Reset height to auto
   textarea.style.height = Math.min(container.clientHeight, textarea.scrollHeight) + 'px'; // Set height to content size or container max height

   return { height, width };
} 

Steps 4: Disable Node Dragging in Diagram
To prevent the node from being dragged, you need to modify the interaction properties of the node. Specifically, you can disable the Drag interaction in the SfDiagramComponent.

private void OnNodeCreating(IDiagramObject obj)
{

    Node node = obj as Node;

    node.Width = 280;
    node.Height = 72;
    node.Constraints = NodeConstraints.Default & ~NodeConstraints.Drag;
    node.Shape = new Shape()
    { Type = Syncfusion.Blazor.Diagram.NodeShapes.HTML };
} 

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to make HTML node resizable but not draggable 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!