How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram?

This article demonstrates how to drag nodes programmatically within a Syncfusion Diagram in a Blazor application. This allows you to manipulate node positions without direct user input, enabling automated layout management, dynamic repositioning, and custom interaction workflows. You’ll learn how to update node offsets using the diagram’s API and trigger diagram refreshes to reflect the changes visually.

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 in your Blazor page and define initial nodes and connectors.

@page "/"
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram" Connectors="@connectors" Height="687px" Nodes="@nodes"></SfDiagramComponent>

<span>Diagram Selection Position X:</span>
<input type="number" placeholder="X" onchange="@SelectionPositionXChange" />
<span>Diagram Selection Position Y:</span>
<input type="number" placeholder="Y" onchange="@SelectionPositionYChange" /> 

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

@code {
   //Reference the diagram
   public SfDiagramComponent? Diagram;
   //Define diagram's nodes collection    
   private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   //Define diagram's connectors collection 
   private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

   protected override void OnInitialized() {
           // A node is created and stored in the nodes collection.
           Node node1 = new Node() {
               ID = "node1",
               OffsetX = 200,
               OffsetY = 200,
               Width = 100,
               Height = 100,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
           };
           nodes.Add(node1);
   
           Node node2 = new Node() {
               ID = "node2",
               OffsetX = 200,
               OffsetY = 500,
               Width = 100,
               Height = 100,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process },
           };
           nodes.Add(node2);
           
           // A connector is created and stored in the connectors collection.
           Connector connector1 = new Connector() {
               ID = "connector1",
               SourceID = "node1",
               TargetID = "node2",
               Type = ConnectorSegmentType.Orthogonal,
           };
           connectors.Add(connector1);
       }
   }

Step 3: Programmatic Node Movement:
Implement handlers for changing positions based on user input. Nodes move according to offsets calculated from the input values.

// To update the X position of the selected nodes/connectors in the diagram.
private void SelectionPositionXChange(Microsoft.AspNetCore.Components.ChangeEventArgs e) {
   if (double.TryParse(e.Value?.ToString(), out double newX)) {
       if ((Diagram.SelectionSettings.Nodes.Count + Diagram.SelectionSettings.Connectors.Count) > 0) {
           double currentX = Diagram.SelectionSettings.OffsetX;
           double offsetX = newX - currentX;
           Diagram.Drag(Diagram.SelectionSettings, offsetX, 0);
       }
   }
}

// To update the Y position of the selected nodes/connectors in the diagram.
private void SelectionPositionYChange(Microsoft.AspNetCore.Components.ChangeEventArgs e) {
   if (double.TryParse(e.Value?.ToString(), out double newY)) {
       if ((Diagram.SelectionSettings.Nodes.Count + Diagram.SelectionSettings.Connectors.Count) > 0) {
           double currentY = Diagram.SelectionSettings.OffsetY;
           double offsetY = newY - currentY;
           Diagram.Drag(Diagram.SelectionSettings, 0, offsetY);
       }
   }
}

How It Works

• User Selection: Select a node.
• Input Trigger: Enter a new X or Y coordinate in the corresponding input field.
• Offset Calculation: The component calculates the difference between the current position and the new target position.
• Programmatic Drag: The Drag method is called on the SelectionSettings object with the calculated offset values, moving the node accordingly without user dragging.

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning How to Drag a Node Programmatically Without User Interaction 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!