How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram?

This article explains how to disable user interaction with nodes in a Syncfusion Diagram within a Blazor application while still allowing programmatic layout updates. This is useful in scenarios where you want to lock node positions from manual dragging or editing, but continue repositioning them dynamically through code—such as during automatic layout executions or workflow updates. You’ll learn how to configure node constraints to restrict interactivity while preserving the ability to modify node properties via the Diagram API.

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:
Integrate the Syncfusion Diagram component into your Blazor page and define nodes and connectors.

@using Syncfusion.Blazor.Diagram


<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
   <Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
   </Layout>
   <SnapSettings>
       <HorizontalGridLines LineColor="white" LineDashArray="2,2">
       </HorizontalGridLines>
       <VerticalGridLines LineColor="white" LineDashArray="2,2">
       </VerticalGridLines>
   </SnapSettings>
</SfDiagramComponent>
<button @onclick="Dolayout">Dolayout</button>
<button @onclick="ChangeLayout">Change Data Source</button> 

Step 2: Define Nodes and Connectors:
In the @code section, initialize your diagram with nodes and connectors.

@code {
    //Reference the diagram
    SfDiagramComponent? diagram;
    //Define diagram's nodes collection
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    //Define diagram's connectors collection
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    int HorizontalSpacing = 40;
    int VerticalSpacing = 40;

    protected override void OnInitialized() {
        // A node is created and stored in the nodes collection.
        nodes = new DiagramObjectCollection<Node>()
        {
            new Node() { ID="node1", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation {Content="Steve-Ceo"} }},
            new Node() { ID="node2", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation {Content="Kevin-Manager"} }},
            // Additional nodes...
        };

        // A connector is created and stored in the connectors collection.
        connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector() { ID="connector1", SourceID="node1", TargetID="node2" },
            // Additional connectors...
        };
    }

    // Invoked when the nodes's Creating event is triggered.
    private void OnNodeCreating(IDiagramObject obj) {
        Node node = obj as Node;
        node.Height = 40;
        node.Width = 100;
        node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
        node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true };
    }

    // To change the diagram layout by updating nodes and connectors collections.
    private async Task ChangeLayout() {
        nodes = new DiagramObjectCollection<Node>()
        {
            new Node() { ID="node1", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Steve-Ceo"} }},
            new Node() { ID="node2", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Kevin-Manager"} }},
            // Adjusted nodes...
        };

        connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector() { ID="connector1", SourceID="node1", TargetID="node2" },
            // Adjusted connectors...
        };
    }
    
    //To refresh the layout at runtime.
    private async Task Dolayout() {
        await diagram?.DoLayoutAsync();
    }
} 

Step 3: Programmatic Layout Control:
Control the layout and interaction settings programmatically to restrict user actions while still allowing layout updates.

1. Option 1: ZoomPan Interaction:
   • Set the DiagramInteractions to ZoomPan to restrict user interactions to only zooming and panning.

<SfDiagramComponent @ref="@diagram" Height="600px" Nodes="@nodes" Connectors="@connectors" InteractionController="DiagramInteractions.ZoomPan">
   <Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
   </Layout>
   <SnapSettings>
       <HorizontalGridLines LineColor="white" LineDashArray="2,2">
       </HorizontalGridLines>
       <VerticalGridLines LineColor="white" LineDashArray="2,2">
       </VerticalGridLines>
   </SnapSettings>
</SfDiagramComponent> 

2. Option 2: Modify Node Constraints:
   • Exclude node selection capabilities by updating NodeConstraints.

private void OnNodeCreating(IDiagramObject obj)
{
   Node node = obj as Node;
   node.Height = 40;
   node.Width = 100;
   //Disables the selection of a node in the diagram
   node.Constraints = NodeConstraints.Default & ~NodeConstraints.Select;
   node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
   node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true };
} 

How It Works

• Interaction Control: By utilizing ZoomPan interaction or modifying constraints, users are restricted from dragging, selecting, resizing, or rotating nodes.
• Layout Updates: Programmatic methods like DoLayoutAsync() ensure that nodes can be repositioned as needed without user interference.

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion 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!