Blazor Diagram Events
The Telerik Blazor Diagram fires events that are related to different user actions. This article describes all these events and their event arguments:
OnConnectionClick
The OnConnectionClick event fires when the user clicks on a connection, including the connection ends that rest on the shape boundaries. The event argument is of type DiagramConnectionClickEventArgs and it provides information about the linked shapes (if they exist) or about the connection coordinates (if set).
Using the Diagram OnConnectionClick event
<TelerikDiagram OnConnectionClick="@OnDiagramConnectionClick" />
@code {
private void OnDiagramConnectionClick(DiagramConnectionClickEventArgs args)
{
}
}Also see the example below.
OnShapeClick
The OnShapeClick event fires when the user clicks on a shape. The event argument is of type DiagramShapeClickEventArgs and provides the shape Id.
Using the Diagram OnShapeClick event
<TelerikDiagram OnShapeClick="@OnDiagramShapeClick" />
@code {
private void OnDiagramShapeClick(DiagramShapeClickEventArgs args)
{
}
}Example
The following example demonstrates all Diagram events in action.
Using Diagram events
<TelerikDiagram Height="360px"
OnConnectionClick="@OnDiagramConnectionClick"
OnShapeClick="@OnDiagramShapeClick">
<DiagramLayout Type="@DiagramLayoutType.Tree" />
<DiagramShapes>
<DiagramShape Id="shape1">
<DiagramShapeContent Text="Shape 1">
</DiagramShapeContent>
</DiagramShape>
<DiagramShape Id="shape2">
<DiagramShapeContent Text="Shape 2">
</DiagramShapeContent>
</DiagramShape>
<DiagramShape Id="shape3">
<DiagramShapeContent Text="Shape 3">
</DiagramShapeContent>
</DiagramShape>
</DiagramShapes>
<DiagramConnections>
<DiagramConnection FromId="shape1" ToId="shape2" />
<DiagramConnection FromId="shape1" ToId="shape3" />
<DiagramConnection>
<DiagramConnectionFrom X="300" Y="20" />
<DiagramConnectionTo X="400" Y="200" />
</DiagramConnection>
</DiagramConnections>
</TelerikDiagram>
@DiagramEventLog
@code {
private string DiagramEventLog { get; set; } = string.Empty;
private void OnDiagramConnectionClick(DiagramConnectionClickEventArgs args)
{
if (args.FromX != null)
{
DiagramEventLog = $"Clicked on the connection between coordinates ({args.FromX}, {args.FromY}) and ({args.ToX}, {args.ToY}).";
}
else
{
DiagramEventLog = $"Clicked on the connection between shapes '{args.FromId}' and '{args.ToId}'.";
}
}
private void OnDiagramShapeClick(DiagramShapeClickEventArgs args)
{
DiagramEventLog = $"Clicked on shape '{args.Id}'.";
}
}