NOTE

Syncfusion® recommends using Blazor Diagram Component which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future.

Events in Blazor Diagram Component

29 Nov 20247 minutes to read

Diagram provides some events support for node that triggers when interacting the node.

Selection change

The SelectionChanged events is triggered when select/unselect the node or connector. The IBlazorSelectionChangeEventArgs interface is used to get selection change event arguments.

The following code example explains how to get the selection change event in the diagram.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents SelectionChanged="@SelectionChanged"></DiagramEvents>
</SfDiagram>

@code{
    // To define node collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };

    protected override void OnInitialized()
    {
        // A node is created and stored in nodes collection.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            // Apperence of the node
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            }
        };
        // Add node
        NodeCollection.Add(node1);
    }

    // SelectionChange event for diagram
    public void SelectionChanged(IBlazorSelectionChangeEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].Id);
    }
}

Position change

The OnPositionChange events is triggered when drag the node or connector in interaction. The IBlazorDraggingEventArgs interface is used to get position change event arguments.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents OnPositionChange="@OnPositionChange"></DiagramEvents>
</SfDiagram>

@code{
    // To define node collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
    protected override void OnInitialized()
    {
        // A node is created and stored in nodes collection.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            }
        };
        // Add node
        NodeCollection.Add(node1);
    }

    // Position change event for diagram
    public void OnPositionChange(IBlazorDraggingEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].Id);
    }
}

Size change

The OnSizeChange events is triggered when resizing the node during the interaction. The ISizeChangeEventArgs interface is used to get size change event arguments.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents OnSizeChange="@OnSizeChange"></DiagramEvents>
</SfDiagram>

@code{
    // To define node collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };

    protected override void OnInitialized()
    {
        // A node is created and stored in nodes collection.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            }
        };
        // Add node
        NodeCollection.Add(node1);
    }

    // Size change event for diagram
    public void OnSizeChange(ISizeChangeEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].Id);
    }
}

Rotate change

The OnRotateChange events is triggered when resizing the node during the interaction. The IRotationEventArgs interface is used to get size change event arguments.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents OnRotateChange="@OnRotateChange"></DiagramEvents>
</SfDiagram>

@code{
    // To define node collection
    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };

    protected override void OnInitialized()
    {
        // A node is created and stored in nodes collection.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            }
        };
        // Add node
        NodeCollection.Add(node1);
    }

    // Rotate change event for diagram
    public void OnRotateChange(IRotationEventArgs args)
    {
        Console.WriteLine(args.NewValue.Nodes[0].Id);
    }
}

See also