We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add Image Links to Diagram Shapes


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.


Attachment: ImageLinkSample_344edee6.zip

3 Replies

SG Shyam G Syncfusion Team August 29, 2017 11:43 AM UTC

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 
Please refer to the help documentation which shows how to create a group node. 
Shyam G 

KA Karthick August 29, 2017 01:24 PM UTC

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.

SG Shyam G Syncfusion Team August 30, 2017 05:55 AM UTC

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. 

Shyam G 

Live Chat Icon For mobile
Up arrow icon