Need to fix nodeTemplate according to attachment Please advise me

[MJ]

Need to fix nodeTemplate

according to attachment

Please advise me

Attachment: CaptureDiagramQT_ce1585b2.zip

[Shyam G]

Hi Miclejee, 

 

We have created a sample to achieve your requirement and it is available for download in the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Layoutsample1133597768 

 

In the above sample, we have rendered an layout with image node in which we have positioned the image at left side by using node’s contentAlignment property(refer help documentation below) and rendered two labels in it. One label is rendered as an hyperlink/URL by using label’s hyperlink property. Here is the sample output image. 

 

Output image: 

 

 

We have used nodeTemplate function to set labels and image for each node. please refer to the code example below. 

 

Code example: 

function nodeTemplate(diagram, node) { 

            node.source = node.ImageUrl; 

            node.labels[0].text = node.Role; 

            node.labels[1].hyperlink = node.Hyperlink; 

        } 

 

Help documentation: https://help.syncfusion.com/aspnetmvc/diagram/shapes#image 

https://help.syncfusion.com/cr/aspnetmvc/Syncfusion.JavaScript.DataVisualization.DiagramEnums.ContentAlignment.html 

 

Regards, 

Shyam G 

[MJ]

THX.

[Shyam G]

Hi Miclejee, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[MJ]

You recommend to use it well. Picture 1

But the URL is long and out of frame.

I can Show Text "More .."  When clicked, open the URL. Picture 2

Help guide

Attachment: Diagram_ed2c6d8d.zip

[Kutraleeswaran]

Hi Miclejee, 

  

  It can be done by setting label’s  TextOverflow property as true and  label’s OverflowType as Ellipsis. 

 

Code Snippet: 

 

Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label label = new Label(); 

label.TextOverflow = true; 

 

label.OverflowType = OverflowType.Ellipsis; 

 

If you need to achieve this requirement in node template, please use the below code example. 

Code example based on Node Template: 

function nodeTemplate(diagram, node) {  

            node.source = node.ImageUrl;  

            node.labels[0].text = node.Role;  

            node.labels[1].hyperlink = node.Hyperlink;  

            node.labels[1].TextOverflow = true; 

            node.labels[1].OverflowType = OverflowType.Ellipsis; 

        }  

 

Regards, 

S.Kutraleeswaran