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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add Image Links to Diagram Shapes

Thread ID:

Created:

Updated:

Platform:

Replies:

132358 Aug 28,2017 02:27 PM UTC Aug 30,2017 05:55 AM UTC ASP.NET MVC 3
loading
Tags: Diagram
Karthick
Asked On August 28, 2017 02:27 PM UTC

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 [Syncfusion]
Replied On 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 
                window.open("https://www.syncfusion.com/downloads/metrostudio"); 
            } 
  
        } 
    } 
 
 
Please refer to the help documentation which shows how to create a group node. 
 
 
Regards, 
Shyam G 


Karthick
Replied On 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.


Shyam G [Syncfusion]
Replied On 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. 

Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;