Add Hyperlink to Diagram Shape?

1 Answer 39 Views
Diagram
Michael
Top achievements
Rank 1
Michael asked on 19 Jul 2023, 09:07 AM
Is it possible to add a hyperlink to a diagram shape?
Michael
Top achievements
Rank 1
commented on 20 Jul 2023, 06:46 AM

Hello Rumen,

thanks a lot!

!

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 19 Jul 2023, 01:07 PM

The default action of the link in the content of the RadDiagram shape is prevented because the dragging operation starts when you click with the mouse.

What you can do is to attach to the OnClick event and implement the redirect to another page. Here is a base example of how to proceed:

<telerik:RadDiagram ID="RadDiagram1" runat="server">
    <ClientEvents OnClick="diagramClick" />
    <ShapesCollection>
        <telerik:DiagramShape Id="cocktails" Type="Rectangle" X="50" Y="50" Width="310" Height="40">
            <ContentSettings Text="Content" />
        </telerik:DiagramShape>
    </ShapesCollection>
</telerik:RadDiagram>
 
<script>
    function diagramClick(e) {
        if (e.item instanceof kendo.dataviz.diagram.Shape) {
            var id = e.item.options.id;
            var content = e.item.options.content.text;
            var message = "ShapeID: " + id + "; ShapeContent: " + content;
            console.log(message);
        }
    }
</script>

 

You can also check the examples in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/client-side-programming/events. The following article provides detailed information on the click event and the data it provides (some of which I used in the code snippet): http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#events-click
Tags
Diagram
Asked by
Michael
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or