Events in Blazor Diagram Component

30 Jun 202524 minutes to read

How to Handle Selection Change Event

  • While selecting the diagram elements, the following events can be used to do the customization.
  • When selecting/unselecting the diagram elements, the following events will be triggered to do customization on those events.
Event Name Arguments Description
SelectionChanging SelectionChangingEventArgs Triggers before the selection is changed in the diagram.
SelectionChanged SelectionChangedEventArgs Triggers when the selection is changed in the diagram.

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

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" SelectionChanging="@OnSelectionChanging" SelectionChanged="@OnSelectionChanged"  Height="500px" Connectors="@connectors">
</SfDiagramComponent>

@code
{
    //Reference the diagram.
    SfDiagramComponent Diagram;
    //Initialize the diagram's connector collection
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 100,
                Y = 100
            },
            TargetPoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            Type = ConnectorSegmentType.Orthogonal,
            TargetDecorator = new DecoratorSettings()
            {
                Shape = DecoratorShape.Arrow,
                Style = new ShapeStyle()
                {
                    Fill = "black",
                    StrokeColor = "black",
                    StrokeWidth = 1
                }
            },
            Style = new ShapeStyle()
            {
                StrokeColor = "black",
                StrokeWidth = 1
            },
        };
        connectors.Add(Connector);
    }

    // To notify the selection changing event before selecting/unselecting the diagram elements.
    public void OnSelectionChanging(SelectionChangingEventArgs args)
    {
    //Sets true to cancel the selection.
    args.Cancel = true;
    }

    // To notify the selection is changed in the diagram.
    private void OnSelectionChanged(SelectionChangedEventArgs arg)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle Position Change Event

  • While dragging the diagram elements, the following events can be used to do the customization.
Event Name Arguments Description
PositionChanging PositionChangingEventArgs Triggers while dragging the elements in the diagram.
PositionChanged PositionChangedEventArgs Triggers when the node’s/connector’s position is changed. 
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" PositionChanging="@OnPositionChanging" PositionChanged="@OnPositionChanged" Height="500px" Connectors="@connectors">
</SfDiagramComponent>

@code
{
    //Reference the diagram.
    SfDiagramComponent Diagram;
    //Initialize the diagram's connectors collection
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 100,
                Y = 100
            },
            TargetPoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            Type = ConnectorSegmentType.Orthogonal,
            TargetDecorator = new DecoratorSettings()
            {
                Shape = DecoratorShape.Arrow,
                Style = new ShapeStyle()
                {
                    Fill = "black",
                    StrokeColor = "black",
                    StrokeWidth = 1
                }
            },
            Style = new ShapeStyle()
            {
                StrokeColor = "black",
                StrokeWidth = 1
            },
        };
        connectors.Add(Connector);
    }

    // To notify the position changing event before dragging the diagram elements.
    public void OnPositionChanging(PositionChangingEventArgs args)
    {
    //Sets true to cancel the dragging.
    args.Cancel = true;
    }

    // To notify the position changed event after dragging the diagram elements.
    private void OnPositionChanged(PositionChangedEventArgs arg)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle Connection Change Event

  • While changing the connection of the connector, the following events can be used to do the customization.
Event Name Arguments Description
ConnectionChanging ConnectionChangingEventArgs Triggers before the connector’s source or target point is connected or disconnected from the source or target.
ConnectionChanged ConnectionChangedEventArgs Triggers when the connector’s source or target point is connected or disconnected from the source or target. 
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" ConnectionChanging="@OnConnectionChanging" ConnectionChanged="@OnConnectionChange" Height="500px" Connectors="@connectors" Nodes="@nodes">
</SfDiagramComponent>

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

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>()
       {
          new Node() 
          {
            OffsetX = 100,
            OffsetY = 100,
            Height = 50,
            Width = 100,
            ID = "node1",
          },
        };
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            TargetID = "node1",
            Type = ConnectorSegmentType.Orthogonal,
            TargetDecorator = new DecoratorSettings()
            {
                Shape = DecoratorShape.Arrow,
                Style = new ShapeStyle()
                {
                    Fill = "black",
                    StrokeColor = "black",
                    StrokeWidth = 1
                }
            },
            Style = new ShapeStyle()
            {
                StrokeColor = "black",
                StrokeWidth = 1
            },
        };
        connectors.Add(Connector);
    }

    // To notify the connection changing event before the connection change.
    private void OnConnectionChanging(ConnectionChangingEventArgs args)
    {
        //Sets true to cancel the connection change.
        args.Cancel = true;
    }

    // To notify the connection changed event after the connection has changed.
    private void OnConnectionChange(ConnectionChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle Source Point Change Event

  • While changing the source point of the connector, the following events can be used to do the customization.
Event Name Arguments Description
SourcePointChanging EndPointChangingEventArgs Triggers while dragging the connector’s source end in the diagram.
SourcePointChanged EndPointChangedEventArgs Triggers when the connector’s source point is changed. 
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" SourcePointChanging="@OnSourcePointChanging" SourcePointChanged="@OnSourcePointChanged" Height="500px" Connectors="@connectors" Nodes="@nodes">
</SfDiagramComponent>

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

    protected override void OnInitialized()
    {
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            TargetPoint = new DiagramPoint()
            {
                X = 300,
                Y = 400,
            }
        };
        connectors.Add(Connector);
    }

    //Notify the source point changing event before the source point change.
    private void OnSourcePointChanging(EndPointChangingEventArgs args)
    {
        //Set true to cancel the source point change.
        args.Cancel = true;
    }

    // Notify the source point changed event after the source point has changed.
    private void OnSourcePointChanged(EndPointChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle Target Point Change Event

  • While changing the target point of the connector, the following events can be used to do the customization.
Event Name Arguments Description
TargetPointChanging EndPointChangingEventArgs Triggers while dragging the connector’s target end in the diagram.
TargetPointChanged EndPointChangedEventArgs Triggers when the connector’s target point is changed 
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" TargetPointChanging="@OnTargetPointChanging" TargetPointChanged="@OnTargetPointChanged" Height="500px" Connectors="@connectors" Nodes="@nodes">
</SfDiagramComponent>

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

    protected override void OnInitialized()
    {
        Connector Connector = new Connector()
            {
                ID = "connector1",
                SourcePoint = new DiagramPoint()
                {
                    X = 200,
                    Y = 200
                },
                TargetPoint = new DiagramPoint()
                {
                    X = 300,
                    Y = 400,
                }
            };
        connectors.Add(Connector);
    }


    // Notify the target point changed event before the target point has changed.
    private void OnTargetPointChanging(EndPointChangingEventArgs args)
    {
        //Action to be performed.
    }
    // Notify the target point changed event after the target point has changed.
    private void OnTargetPointChanged(EndPointChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle Connector Creating Event

  • The ConnectorCreating event helps to define default properties of the connector. The connector creation is triggered when the diagram is initialized. In the Connector creating event, you can customize the connector properties.
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" 
                    Connectors="@connectors" 
                    ConnectorCreating="OnConnectorCreating" />

@code
{
    // Define the connector collection.
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        connectors = new DiagramObjectCollection<Connector>();
        //A connector is created and stored in the connectors collection.
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            TargetPoint = new DiagramPoint()
            {
                X = 300,
                Y = 400,
            }
        };
        connectors.Add(Connector);
    }

    public void OnConnectorCreating(IDiagramObject args)
    { 
        Connector connector = args as Connector;
        connector.Style.Fill = "black";
        connector.Style.StrokeColor = "black";
        connector.Style.Opacity = 1;
        connector.TargetDecorator.Style.Fill = "black";
        connector.TargetDecorator.Style.StrokeColor = "black";
    }
}

You can download a complete working sample from GitHub

How to Handle Segment Collection Change Event

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" 
                    Connectors="@connectors" 
                    SegmentCollectionChange="SegmentCollectionChange" />

@code
{
    // Define the connector collection.
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        connectors = new DiagramObjectCollection<Connector>();
        //A connector is created and stored in the connectors collection.
        Connector Connector = new Connector()
        {
            ID = "connector1",
            SourcePoint = new DiagramPoint()
            {
                X = 200,
                Y = 200
            },
            TargetPoint = new DiagramPoint()
            {
                X = 300,
                Y = 400,
            }
        };
        connectors.Add(Connector);
    }

    public void SegmentCollectionChange(SegmentCollectionChangeEventArgs args)
    { 
       
    }
}

You can download a complete working sample from GitHub

How to Handle Collection Change Events

  • The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the connector collection undergoes changes.
Event Name Arguments Description
CollectionChanging CollectionChangingEventArgs Triggers before the node or connector is added or removed from the diagram.
CollectionChanged CollectionChangedEventArgs Triggers after the node or connector is added or removed from the diagram 
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Connectors="@connectors"
                    CollectionChanged="OnCollectionChanged">
</SfDiagramComponent>
@code{
    SfDiagramComponent Diagram;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
          Connector Connector = new Connector()
        {
            ID = "connector1",
            // Set the source and target point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            // Type of the connector segments.
            Type = ConnectorSegmentType.Straight
        };
        connectors.Add(Connector);
    }
     //  Notify the Collection Changed event while changing the collection of the connector at run time.
    private void OnCollectionChanged(CollectionChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

How to Handle the Mouse Enter Event

The MouseEnter event is triggered when the mouse pointer enters the boundary of a connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the DiagramElementMouseEventArgs.

@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Connectors="@connectors"
                    MouseEnter="OnMouseEnter">
</SfDiagramComponent>
@code{
    SfDiagramComponent Diagram;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
          Connector Connector = new Connector()
        {
            ID = "connector1",
            // Set the source and target point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            // Type of the connector segments.
            Type = ConnectorSegmentType.Straight
        };
        connectors.Add(Connector);
    }
    private void OnMouseEnter(DiagramElementMouseEventArgs args)
    {
    }
}

You can download a complete working sample from GitHub

How to Handle the Mouse Leave Event

The MouseLeave event is triggered when the mouse pointer exits the boundaries of a connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the DiagramElementMouseEventArgs.

@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Connectors="@connectors"
                    MouseLeave="OnMouseLeave">
</SfDiagramComponent>
@code{
    SfDiagramComponent Diagram;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
          Connector Connector = new Connector()
        {
            ID = "connector1",
            // Set the source and target point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            // Type of the connector segments.
            Type = ConnectorSegmentType.Straight
        };
        connectors.Add(Connector);
    }
    private void OnMouseLeave(DiagramElementMouseEventArgs args)
    {
    }
}

You can download a complete working sample from GitHub

How to Handle the Mouse Hover Event

The MouseHover event is triggered when the mouse pointer hovers over a connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the DiagramElementMouseEventArgs.

@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Connectors="@connectors"
                    MouseHover="OnMouseHover">
</SfDiagramComponent>
@code{
    SfDiagramComponent Diagram;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
         Connector Connector = new Connector()
        {
            ID = "connector1",
            // Set the source and target point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            // Type of the connector segments.
            Type = ConnectorSegmentType.Straight
        };
        connectors.Add(Connector);
    }
    private void OnMouseHover(DiagramElementMouseEventArgs args)
    {
    }
}

You can download a complete working sample from GitHub

How to Handle Property Changed Event

The Property Changed event is triggered when connector’s property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the PropertyChangedEventArgs.

@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="@diagram" 
                    Width="100%" 
                    Height="700px" 
                    Connectors="@connectors"
                    PropertyChanged="OnNodePropertyChanged">
</SfDiagramComponent>
@code {
    SfDiagramComponent diagram;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
          Connector Connector = new Connector()
        {
            ID = "connector1",
            // Set the source and target point of the connector.
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            // Type of the connector segments.
            Type = ConnectorSegmentType.Straight
        };
        connectors.Add(Connector);
    }
    // Method to handle Property Changed event
    private void OnNodePropertyChanged(PropertyChangedEventArgs args)
    {
        if (args.Element is Connector changedNode)
        {
            // Logic to handle the property change for the specific connector
            Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
            // Additional logic to handle updates
        }
    }
}

You can download a complete working sample from GitHub

See also