how to get the size of text bounding box ?

[Wanlop]

Hello,

I'm using Syncfusion.JavaScript.DataVisualization.Models.Diagram;

How to get the size of TextNode.TextBlock that fit with the given 'Text' ?  (Or size of Label of Node) 

Seem that the default width is 50, doesn't matter how long of text it is.

Any suggest or trick or work around please.. 

[Shyam G]

Hi Wanlop, 

Please refer to the code example below in which we have shown how to get the size of the text. 

Code example: 

            TextNode TextNode = new TextNode(); 

            TextNode.Name = "TextNode"; 

            TextNode.OffsetX = 100; 

            TextNode.OffsetY = 100; 

            TextNode.Height = 100; 

            TextNode.Width = 100; 

            //Set the text node properties 

            TextNode.TextBlock.Text = "Text Node";            

            model.Nodes.Add(TextNode); 

 

            //to get the size of the text 

            $('span#TextNode')[0].getBoundingClientRect() 

 

Note:  $('span#TextNode')[0], Here TextNode is a node name. 

Regards, 

Shyam G 

[Wanlop]

thanks. I then notice that this have to be done on client side with Script.

So, it bring me to another issue.

How to wire the client the event 'On Node in the diagram changed' ?

I try to do the same as in the online document core-concept BUT I don't manage to wire similar as DatePicket for this

@Html.EJ().Diagram("Diagram", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)

Thanks again.

[Shyam G]

Hi Wanlop, 

 

Currently we don’t have support for the requested requirement. We considered this “Need to provide support to define ClientSideEvents in the CSHTML page” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

 

you can define the event in the controller/class file as shown in the below code example. 

 

code example: 

DiagramProperties model = new DiagramProperties(); 

//define click event 

 model.Click = "click"; 

 

<script type="text/javascript"> 

    function click(args) { 

        alert("click event triggered") 

    } 

</script> 

 

Regards, 

Shyam G