Add Image Links to Diagram Shapes

[Karthick]

Hello,

I am using ASP.NET MVC library. Is it possible to add image links to Diagram shapes? Assume, I have a Shape with text "Books" and Need to add 3 -4 links to that shape with a small image icon. clicking on that image icon should redirect me to a URL. I tried looking into the DiagramBuilder samples which has svgTemplate where a template is added. I ran that application but I couldnt find how the shape with link can be added. Can you please advise?

I have attached a PNG file for reference.

Thanks,

Karthick

Attachment: ImageLinkSample_344edee6.zip

[Shyam G]

 

Hi Karthick, 

 

We have created a sample in which we have rendered image icon as an group node. Also when you click on the image icon, the diagram click event gets triggered and in that event, we open URL in new tab. Please refer to the code example below which shows how to define the click event and sample below. 

 

Code example: 

 

  //define click event 

            model.Click = "click"; 

 

function click(args) { 

        if (args && args.element) { 

            //check the node name 

              if (args.element.name === "user") { 

                 //redirect the url 

                window.open("https://www.syncfusion.com/downloads/metrostudio"); 

            } 

  

        } 

    } 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/groupnodesample1322653884 

 

Please refer to the help documentation which shows how to create a group node. 

 

Help documentation: https://help.syncfusion.com/aspnetmvc/diagram/group 

 

Regards, 

Shyam G 

[Karthick]

Thank you Shyam for your quick response. Sample application looks perfect and this is what i am looking for. One more request, Can you add some sample images to the help document for better understanding? It may give a better understanding if someone looks for these functionalities in future. Thanks again.

[Shyam G]

Hi Karthick, 

We have an help documentation of how to create a group node and an image node. We will not include creating an image icon as a group node in the help documentation because we can create any node as a group node and there is more use cases like this. However we will consider a knowledge base document for it and let you know once it has been refreshed in online. 

Regards, 

Shyam G