Clickable link in node for an Org Chart

[Andrew]

I am looking for in an org chart for me to look at considering this library in my application.  So for it looks great, but looking to solve this issue;

For each node in the org chart I would like to have an HTML link to open new window for employee, similar to below image,  i would like to understand how i can make the text inside a node clickable into a new window. I have tried using DiagramHTMLElement, but gives me errors and not sure how to use it.

So far have this,  but rendering like so;

setNodeTemplate: function (obj, diagram) {
    var content = new StackPanel();
    content.id = obj.id + '_outerstack';
    content.orientation = 'Horizontal';
    content.style.strokeColor = 'gray';
    content.padding = {left: 5, right: 10, top: 5, bottom: 5};

    var image = new ImageElement();
    image.width = 50;
    image.height = 50;
    image.style.strokeColor = 'none';
    image.source = obj.data.avatarUrl;
    image.id = obj.id + '_pic';

    var innerStack = new StackPanel();
    innerStack.style.strokeColor = 'none';
    innerStack.margin = {left: 5, right: 0, top: 0, bottom: 0};
    innerStack.id = obj.id + '_innerstack';

    var nameText = new TextElement();
    nameText.id = obj.id + '_text1';
    nameText.content = obj.data.fullName;
    nameText.style.bold = true;

    var positionText = new TextElement();
    positionText.id = obj.id + '_desig';
    positionText.content = (obj.data["position"] ? obj.data["position"] : "");

    var subordinates = new TextElement();
    subordinates.id = obj.id + '_subord';
    subordinates.content = obj.data.subordinates.toString();

    innerStack.children = [nameText, positionText, subordinates];
    content.children = [image, innerStack];
    return content;
},

[Aravind Ravi]

Hi Andrew, 

 

We have created a sample to provide an HTML link to open a new window for employees. By using hyperlink property in the text element we can able to provide an HTML link for employee name. In the text, element set HTML link for the employee in the hyperlink property and set text-decoration as Underline. So that when you click on the employee name it will navigate to another page. Please find the below code snippet for how to set hyperlink and text-decoration for text elements. 

 

let text: TextElement = new TextElement(); 

    text.content = (obj.data as EmployeeInfo).Name; 

     text.style.color = 'black'; 

    text.style.bold = true; 

    text.style.strokeColor = 'none'; 

    text.style.textDecoration = 'Underline'; 

    text.hyperlink.link = "https://ej2.syncfusion.com/home/"; 

    text.horizontalAlignment = 'Left'; 

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/ncauad?file=index.ts 

 

 

 

Regards 

Aravind Ravi