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
Selection change
The SelectionChanged event will be triggered when you select or 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" Connectors="@ConnectorCollection">
<DiagramEvents SelectionChanged="@SelectionChanged"></DiagramEvents>
</SfDiagram>
@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
protected override void OnInitialized()
{
DiagramConnector diagramConnector = new DiagramConnector()
{
Id = "Connector1",
SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
TargetDecorator = new ConnectorTargetDecorator()
{
Shape = DecoratorShapes.Arrow,
Style = new DecoratorShapeStyle()
{
Fill = "#6f409f",
StrokeColor = "#6f409f",
StrokeWidth = 1
}
},
Style = new ConnectorShapeStyle()
{
StrokeColor = "#6f409f",
StrokeWidth = 1
},
Type = Segments.Orthogonal
};
ConnectorCollection.Add(diagramConnector);
}
// SelectionChange event for diagram
public void SelectionChanged(IBlazorSelectionChangeEventArgs args)
{
Console.WriteLine(args.NewValue.Connectors[0].Id);
}
}
Position change
The OnPositionChange events will be triggered when dragging 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" Connectors="@ConnectorCollection">
<DiagramEvents OnPositionChange="@OnPositionChange"></DiagramEvents>
</SfDiagram>
@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
protected override void OnInitialized()
{
DiagramConnector diagramConnector = new DiagramConnector()
{
Id = "Connector1",
SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
TargetDecorator = new ConnectorTargetDecorator()
{
Shape = DecoratorShapes.Arrow,
Style = new DecoratorShapeStyle()
{
Fill = "#6f409f",
StrokeColor = "#6f409f",
StrokeWidth = 1
}
},
Style = new ConnectorShapeStyle()
{
StrokeColor = "#6f409f",
StrokeWidth = 1
},
Type = Segments.Orthogonal
};
ConnectorCollection.Add(diagramConnector);
}
// Position change event for diagram
public void OnPositionChange(IBlazorDraggingEventArgs args)
{
Console.WriteLine(args.NewValue.Connectors[0].Id);
}
}
Connection change
The OnConnectionChange event will notify when the connection is changed. The IBlazorConnectionChangeEventArgs interface is used to get event arguments.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Height="600px" Connectors="@ConnectorCollection" Constraints="@diagramConstraints">
<DiagramEvents OnConnectionChange="@OnConnectionChange"></DiagramEvents>
</SfDiagram>
@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
//Defines diagram's constraints values.
public DiagramConstraints diagramConstraints = DiagramConstraints.Default;
private void OnConnectionChange(IBlazorConnectionChangeEventArgs args)
{
Console.WriteLine("Oldvalue", args.OldValue);
Console.WriteLine("NewValue", args.NewValue);
}
protected override void OnInitialized()
{
DiagramConnector diagramConnector = new DiagramConnector()
{
SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
TargetDecorator = new ConnectorTargetDecorator()
{
Shape = DecoratorShapes.Arrow,
Style = new DecoratorShapeStyle()
{
Fill = "#6f409f",
StrokeColor = "#6f409f",
StrokeWidth = 1
}
},
Style = new ConnectorShapeStyle()
{
StrokeColor = "#6f409f",
StrokeWidth = 1
},
Type = Segments.Straight,
};
//Add the connector into connectors's collection.
ConnectorCollection.Add(diagramConnector);
}
}