[Solved] Hyperlinksin a Diagram rectangle?

1 Answer 26 Views

Diagram

1 Answer, 1 is accepted

answered on 03 Feb 2026, 06:39 AM

Hi Kevin,

The Diagram has an OnShapeClick event that you can use to navigate to a URL programmatically with the NavigationManager. Below is an example. For the time being, a separate element inside a Diagram shape cannot be clickable on its own. The reason is that the Diagram renders as an SVG image, so it's not possible to insert interactive Blazor elements or components inside it.

@inject NavigationManager NavigationManager

<TelerikDiagram Height="360px"
                OnShapeClick="@OnDiagramShapeClick">
    <DiagramLayout Type="@DiagramLayoutType.Tree" />

    <DiagramShapes>
        <DiagramShape Id="shape1">
            <DiagramShapeContent Text="Home">
            </DiagramShapeContent>
        </DiagramShape>
        <DiagramShape Id="shape2">
            <DiagramShapeContent Text="Counter">
            </DiagramShapeContent>
        </DiagramShape>
        <DiagramShape Id="shape3">
            <DiagramShapeContent Text="Weather">
            </DiagramShapeContent>
        </DiagramShape>
    </DiagramShapes>

    <DiagramConnections>
        <DiagramConnection FromId="shape1" ToId="shape2" />
        <DiagramConnection FromId="shape1" ToId="shape3" />
    </DiagramConnections>
</TelerikDiagram>

@code {
    private readonly Dictionary<string, string> DiagramShapeUrls = new()
    {
        { "shape1", "/" },
        { "shape2", "/counter" },
        { "shape3", "/weather" }
    };

    private void OnDiagramShapeClick(DiagramShapeClickEventArgs args)
    {
        if (DiagramShapeUrls.ContainsKey(args.Id))
        {
            NavigationManager.NavigateTo(DiagramShapeUrls[args.Id]);
        }
    }
}

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.