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.

Swimlane Diagram node as a hyperlink

Thread ID:

Created:

Updated:

Platform:

Replies:

132186 Aug 18,2017 05:16 AM Aug 25,2017 02:32 AM JavaScript 7
loading
Tags: ejDiagram
Alan Earp
Asked On August 18, 2017 05:16 AM

Hi,

I'm trying to get a node to act as a hyperlink, but can't find a way to do this.
I've managed to get a click working as per https://www.syncfusion.com/forums/118543/diagram-organizational-chart-allow-to-click-on-each-node but that isnt ideal.

Is there any other way to get this to work?

Thanks

Noble

Shyam G [Syncfusion]
Replied On August 21, 2017 07:36 AM

Hi Alan, 
 
Please use label’s hyperlink property to achieve your requirement. please refer to the code example and sample below. 
 
Code example: 
var nodes = 
            [ 
                { name: "NewIdea", width: 150, height: 60, offsetX: 300, offsetY: 60, labels: [{ "hyperlink": "https://www.syncfusion.com" }],   
 
            ]; 
 
 
Regards, 
Shyam G 


Alan Earp
Replied On August 22, 2017 12:37 PM

Thanks,

This will show the hyperlink itself, is there any way to have both text AND hyperlink? so it looks something like this If i have hyperlink with text, the text gets displayed, and the link doesn't display also, preferably open in the same window rather than a popup

Also, i'd like the node to be disabled with no other action allowed except to click it as if it were a simple link. If i set any constraint, the link doesnt work

see first node here http://jsplayground.syncfusion.com/q3kjyppy

not much documentation at https://help.syncfusion.com/api/js/ejdiagram#members:nodes-labels


Shyam G [Syncfusion]
Replied On August 23, 2017 08:35 AM

Hi Alan, 
 
Could you please confirm us whether you need both label and hyperlink to be displayed in a node as shown in the below screenshot? If yes, we can create a multiple label for an node. Please refer to the code example below. Also please confirm us when you disable node constraints, the hyperlink text should not work? If we misunderstood your requirement, please provide us more details such as screenshot explain your requirement with screenshot. Also we could not find any attachment from your update. 
 
Code example: 
 
var nodes =  
            [  
                { name: "NewIdea", width: 150, height: 60, offsetX: 300, offsetY: 60, labels: [{ "hyperlink""https://www.syncfusion.com" }, { text: "label", offset: {x:0.5,y:0.2}}],    
  
            ];  
 
 
Screenshot: 
 
 
Regards, 
Shyam G 
 


Alan Earp
Replied On August 23, 2017 08:48 AM

Thanks for the response.

I'd want the text "label" in your screenshot to be a link that, when they click on it, goes to syncfusion. This is because hte links themselves are really long so wouldnt look good displayed.

I dont want the users to move the nodes around, but just to be able to click the hyperlink - or click the node and they navigate to the link that the text says 

What i'm trying to achieve is like in the image attached (original source https://global-uploads.webflow.com/573d5a1eee15ab7f704a5af7/59531650ff742f42927e8571_strategy-map-example-peoplestreme.png)

Each of the nodes on the image is an objective e.g. the one that says "Reduce Cost To Hire..." will be a link to view that objective, so when the user clicks that node, they can effectively drill down to see more details about how to reduce cost to hire

Thanks & hope that helps


Attachment: strategymapexample_421ffff8.zip

Shyam G [Syncfusion]
Replied On August 24, 2017 07:32 AM

Hi Alan, 
 
To achieve your requirement, please create a node label and set fontColor as blue, textDecoration as underline, so that it looks as an hyperlink. When you click on the node, the click event triggers and in that event, you can specify an hyperlink in window.open method. To disable node interaction, please set nodeConstraints as PointerEvents. Please refer to the code example and playground link 
 
Code example: 
  
 $("#diagram").ejDiagram({                     
          defaultSettings: { 
                 node: { 
                            //to disable node interaction 
                            constraints: ej.datavisualization.Diagram.NodeConstraints.PointerEvents, 
                            //set fontColor,textDecoration 
                            labels: [{ text: "", fontColor: "blue", textDecoration: "underline", readOnly: true }] 
                        }, 
                  }, 
                  //define click event 
                click:click,             
 }); 
  
function click(args) { 
      var diagram = $("#diagram").ejDiagram("instance"); 
      if (args && args.element) { 
                //check an condition whether you click a label or node 
                if (args.event.target.className === "ej-d-label" || diagram.getObjectType(args.element) === "node") 
                 window.open("https://www.syncfusion.com/"); 
         } 
 } 
 
 
Regards, 
Shyam G 


Alan Earp
Replied On August 24, 2017 12:55 PM

Thanks,

The links are different per node, can i set a custom attribute that I can read on the label?

Thanks


Kameshwaran R [Syncfusion]
Replied On August 25, 2017 02:32 AM

Hi Alan, 

We have achieved your requirement with adding custom properties to the label. Please find the below playground link with your requirement. 


Regards, 
Kameshwaran R. 


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.

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.

;