[Solved] Hyperlinksin a Diagram rectangle?

[Kevin]

Can I place a hyperlink in a Diagram rectangle? The JSON is being pulled from a SQL SERVER DB. I can embed an image and text, but cannot figure out how to make either the image or text a clickable hyperlink

[Dimo]

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