hyperlink in node template opens new window

Question

Evaluating your product and looking a Diagram to build Org Chart which works fine. Even able to display the Name with Underline and have it jump to hyperlink

text.style.textDecoration = 'Underline';

text.hyperlink.link = '/EmpDir/Orgchart/?employeeID=' + obj.data.EmployeeID.trim();

Is there a way to have it just open this page on the current page?

Basically I did a search and displayed employee results in your DataGrid with hyperlinks. When you select an employee their it jumps to this page within the current page and display Employee Info with the Org Chart below them with them as the root.

And if I click on an employee underneath them I would just want it to open this current page now for this user selected, but the above code opens a new window. The above code is from my function setNodeTemplate(obj)

Arunkumar Manoharan · Answer

Hi Joseph,We suggest you to use the hyperlinkOpenState as CurrentTab to open
the hyperlink in the same tab and we have created a sample to open the
hyperlink in same tab with HTML Node template. For more info, please refer to
the code snippet and attached sample below.

Code snippet:

Node1.Add(new
  DiagramNodeAnnotation()
              {
                  //Sets the offset for the
  content
                  Content = "Node1",
                  Hyperlink = new
  DiagramHyperlink()
                  {
                      Link =
  "https://www.google.com/",
                      HyperlinkOpenState =
  Syncfusion.EJ2.Diagrams.LinkTarget.CurrentTab
   
                  },            
  });

And also, we have attached the UG-Documentation link for HyperlinkOpenState.UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/diagram/labels#hyperlinkRegards, Arun Kumar.

Joseph Pacelli · Answer

Thanks,

But I'm doing this in my javascript code. See the line in bold

Code snippet:

function setNodeTemplate(obj) {

//create a stack panel

var content = new ej.diagrams.StackPanel();

content.id = obj.id + '_outerstack';

content.orientation = 'Horizontal';

content.style.strokeColor = 'gray';

content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

//create a image element

var image = new ej.diagrams.ImageElement();

image.width = 75;

image.height = 75;

image.style.strokeColor = 'none';

image.source = obj.data.imagePath;

image.id = obj.id + '_pic';

//create a stack panel

var innerStack = new ej.diagrams.StackPanel();

innerStack.style.strokeColor = 'none';

innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };

innerStack.id = obj.id + '_innerstack';

//create a text element

var text = new ej.diagrams.TextElement();

text.content = obj.data.LNFName;

text.style.color = 'black';

text.style.bold = true;

text.style.strokeColor = 'none';

text.horizontalAlignment = 'Left';

text.style.textDecoration = 'Underline';

text.hyperlink.link = '/EmpDir/Orgchart/?employeeID=' + obj.data.EmployeeID.trim();

text.style.fill = 'none';

text.id = obj.id + '_text1';

//create a text element

var titleText = new ej.diagrams.TextElement();

titleText.margin = { left: 0, right: 0, top: 5, bottom: 0 };

titleText.content = obj.data.JobTitle;

titleText.style.color = 'black';

titleText.style.strokeColor = 'none';

titleText.style.fontSize = 14;

titleText.style.fill = 'none';

titleText.horizontalAlignment = 'Left';

titleText.style.textWrapping = 'Wrap';

titleText.id = obj.id + '_desig';

//append a text to the stack children property

innerStack.children = [text, titleText];

//append a image and innerstack to the stack children property

content.children = [image, innerStack];

return content;

}

Arunkumar Manoharan · Answer

Hi Joseph,We have modified the sample and added the code in JavaScript. For
more info, please refer to the code snippet and attached sample below.

Code snippet:

function created()
  {
          var diagram =
  document.getElementById("container").ej2_instances[0];
          diagram.nodes[0].annotations[0].hyperlink.hyperlinkOpenState
  = 'CurrentTab';
      }

And also, we have attached javascript UG-Documentation link for HyperlinkOpenState.UG Link: https://ej2.syncfusion.com/javascript/documentation/diagram/labels/#hyperlinkRegards, Arun Kumar.Attachment: hyperlinksameTab_(2)_6dea9833.zip