Blazor Diagram Events

Updated on May 18, 2026

The Telerik Blazor Diagram fires events that are related to different user actions. This article describes all these events and their event arguments:

• OnConnectionClick
• OnConnectionDragStart
• OnConnectionDragEnd
• OnShapeClick
• OnShapeDragStart
• OnShapeDragEnd

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

RAZOR

<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

RAZOR

<TelerikDiagram OnShapeClick="@OnDiagramShapeClick" />

@code {
    private void OnDiagramShapeClick(DiagramShapeClickEventArgs args)
    {

    }
}

Use the Diagram JSON state if you need to change the Diagram configuration while persisting other user changes that are not part of the component declaration.

OnConnectionDragStart

The OnConnectionDragStart event fires when the user starts dragging a connection in the Diagram. The event argument is of type DiagramConnectionDragStartEventArgs and provides information about the connection being dragged.

Using the Diagram OnConnectionDragStart event

RAZOR

<TelerikDiagram OnConnectionDragStart="@OnDiagramConnectionDragStart" />

@code {
    private void OnDiagramConnectionDragStart(DiagramConnectionDragStartEventArgs args)
    {
        // args.Connections contains the dragged connections
        // args.ConnectionHandle is "source" or "target" when dragging an endpoint
    }
}

Also see the example below.

OnConnectionDragEnd

The OnConnectionDragEnd event fires when the user finishes dragging a connection in the Diagram. The event argument is of type DiagramConnectionDragEndEventArgs and provides the same information as OnConnectionDragStart.

Using the Diagram OnConnectionDragEnd event

RAZOR

<TelerikDiagram OnConnectionDragEnd="@OnDiagramConnectionDragEnd" />

@code {
    private void OnDiagramConnectionDragEnd(DiagramConnectionDragEndEventArgs args)
    {
        // args.Connections contains the dragged connections
    }
}

Also see the example below.

OnShapeDragStart

The OnShapeDragStart event fires when the user starts dragging a shape in the Diagram. The event argument is of type DiagramShapeDragStartEventArgs and provides information about the shape being dragged.

The DiagramShapeDragStartEventArgs exposes the following property:

• Shapes (List<DiagramShapeDragDescriptor>)—the shapes being dragged. Each DiagramShapeDragDescriptor contains the shape Id.

Using the Diagram OnShapeDragStart event

RAZOR

<TelerikDiagram OnShapeDragStart="@OnDiagramShapeDragStart" />

@code {
    private void OnDiagramShapeDragStart(DiagramShapeDragStartEventArgs args)
    {
        // args.Shapes contains the dragged shapes
    }
}

Also see the example below.

OnShapeDragEnd

The OnShapeDragEnd event fires when the user finishes dragging a shape in the Diagram. The event argument is of type DiagramShapeDragEndEventArgs and provides the same information as OnShapeDragStart.

Using the Diagram OnShapeDragEnd event

RAZOR

<TelerikDiagram OnShapeDragEnd="@OnDiagramShapeDragEnd" />

@code {
    private void OnDiagramShapeDragEnd(DiagramShapeDragEndEventArgs args)
    {
        // args.Shapes contains the dragged shapes
    }
}

Also see the example below.

Example

The following example demonstrates all Diagram events in action.

Using Diagram events

<TelerikDiagram Height="400px"
                OnConnectionClick="@OnDiagramConnectionClick"
                OnConnectionDragStart="@OnDiagramConnectionDragStart"
                OnConnectionDragEnd="@OnDiagramConnectionDragEnd"
                OnShapeClick="@OnDiagramShapeClick"
                OnShapeDragStart="@OnDiagramShapeDragStart"
                OnShapeDragEnd="@OnDiagramShapeDragEnd">
    <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 OnDiagramConnectionDragStart(DiagramConnectionDragStartEventArgs args)
    {
        string handleInfo = string.IsNullOrEmpty(args.ConnectionHandle)
            ? string.Empty
            : $" (endpoint: {args.ConnectionHandle})";

        DiagramEventLog = $"Started dragging {args.Connections.Count} connection(s){handleInfo}.";
    }

    private void OnDiagramConnectionDragEnd(DiagramConnectionDragEndEventArgs args)
    {
        DiagramEventLog = $"Finished dragging {args.Connections.Count} connection(s).";
    }

    private void OnDiagramShapeDragStart(DiagramShapeDragStartEventArgs args)
    {
        DiagramEventLog = $"Started dragging {args.Shapes.Count} shape(s).";
    }

    private void OnDiagramShapeDragEnd(DiagramShapeDragEndEventArgs args)
    {
        DiagramEventLog = $"Finished dragging {args.Shapes.Count} shape(s).";
    }

    private void OnDiagramShapeClick(DiagramShapeClickEventArgs args)
    {
        DiagramEventLog = $"Clicked on shape '{args.Id}'.";
    }
}

See Also

• Live Demos: Diagram
• Diagram API Reference