Node in Blazor Diagram Component

9 Mar 20229 minutes to read

Nodes are graphical objects that are used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data and it represents the functions of a complete system regarding to how it interacts with external entities.

Node in Blazor Diagram

Create node

A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked in the diagram area from bottom-to-top in the order they are added.

Add node through nodes collection

To create a node, define the Node object and add that to the nodes collection of the diagram. The following code example shows how to add a node to the diagram.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
        {
            ID = "node1",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() 
            { 
                Fill = "#6495ED", 
                StrokeColor = "white" 
            }
        };
        // Add node.
        nodes.Add(node);
    }
}

Adding Node from Node Collection in Blazor Diagram

Add nodes at runtime

You can add a Node at runtime by adding it to the nodes collection of the Diagram component. The following code explains how to add a node at runtime.

@using Syncfusion.Blazor.Diagram

<input type="button" value="Add Node" @onclick="@AddNode">
<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" />

@code
{
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            ID = "node1",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() { Fill = "#6495ED" }
        };
        nodes.Add(node);
    }

    public void AddNode()
    {
        Node NewNode = new Node()
        {
            ID = "node2",
            // Position of the node.
            OffsetX = 450,
            OffsetY = 450,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() { Fill = "#6495ED" }
        };
        nodes.Add(NewNode);
    }
}

Add node from palette

Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to the Symbol Palette.

  • Once you drag a node/connector from the palette to the diagram, the following events can be used to do the customization.
  • When a symbol is dragged into a diagram from symbol palette, the DragStart event gets triggered. DragStartEventArgs notifies when the element enters into the diagram from the symbol palette.
  • When a symbol is dragged over a diagram, the Dragging event gets triggered. DraggingEventArgs notifies when an element drags over another diagram element.
  • When a symbol is dragged and dropped from symbol palette to diagram area, the DragDrop event gets triggered. DropEventArgs notifies when the element is dropped on the diagram.
  • When a symbol is dragged outside of the diagram, the DragLeave event gets triggered. DragLeaveEventArgs notifies when the element leaves the diagram.

Adding Nodes from Palette in Blazor Diagram

Draw node using drawing object

Nodes can be interactively drawn by clicking and dragging on the diagram surface by using the DrawingObject.

For more information about drawing node, refer to the Draw Nodes.

Drawing Node in Blazor Diagram

Create node through data source

Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about datasource, refer to the DataSource.

Remove nodes at runtime

A node can be removed from the diagram at runtime by using the Remove method.

The following code shows how to remove a node at runtime.

@using Syncfusion.Blazor.Diagram

<input type="button" value="Remove Node" @onclick="@RemoveNodes">

<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" />

@code
{
    //Defines diagram's connector collection.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            ID = "node1",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() 
            { 
                Fill = "#6495ED", 
                StrokeColor = "white" 
            }
        };
        // Add node
        nodes.Add(node);
    }

    public void RemoveNodes()
    {
        // Remove Node at runtime.
        nodes.Remove(nodes[0]);
    }
}

A node can be removed from the diagram by using the native RemoveAt method. Refer to the following example that shows how to remove the node at runtime.

public void RemoveNodes()
{
    nodes.RemoveAt(0);
}

Update nodes at runtime

You can change any node’s properties at runtime.

The following code example explains how to change the node properties.

@using Syncfusion.Blazor.Diagram

<input type="button" value="Update Node" @onclick="@UpdateNodes">
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Nodes="@nodes"/>

@code
{
    SfDiagramComponent Diagram;
    //Defines diagram's node collection.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            ID = "node1",
            // Position of the node.
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node.
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() 
            { 
                Fill = "#6495ED", 
                StrokeColor = "white" 
            }
        };
        nodes.Add(node);
    }

    public async void UpdateNodes()
    {
        Diagram.BeginUpdate();
        Diagram.Nodes[0].Width = 50;
        Diagram.Nodes[0].Height = 50;
        await Diagram.EndUpdate();
    }
}

BeginUpdate and EndUpdate methods allow you to stop the continuous update of control and resume it finally.

See Also