Events in Blazor Diagram Component

12 Nov 202421 minutes to read

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

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

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

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

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

ConnectorCreating 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

Segment collection change event

• The SegmentCollectionChange event triggers when the connector’s segment collection is updated. To explore about arguments, refer to the SegmentCollectionChangeEventArgs.

@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

See also

• How to customize the connector properties

• How to interact with the connector

• How to change the segments