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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Set node position and size programmatically

Thread ID:

Created:

Updated:

Platform:

Replies:

148553 Oct 24,2019 02:04 PM UTC Oct 28,2019 01:10 AM UTC Angular - EJ 2 3
loading
Tags: Diagram
Justus Pett
Asked On October 24, 2019 02:04 PM UTC

Hello,

I am trying to figure out a way to set a node's position and size via code. I tried something like:

node.offsetX = newPosition.x;
node.offsetY = newPosition.y;

and

node.width = newSize.width;
node.height = newSize.height;

Unfortunately, the diagram is not updated accordingly. However, I didn't find any method in DiagramComponent or in the Node class, which would allow me to update these properties. The only way I was able to make it work somehow was by calling diagram.removeNode and diagram.addNode. Besides of being not a very nice solution it also came with problems with the current selection which was not updated correctly.

I am sure I just missed the correct methods or properties to call. Any help would be very much appreciated.

Thanks and best regards,

Justus

Shyam G [Syncfusion]
Replied On October 25, 2019 05:16 AM UTC

Hi Justus, 
 
We have created a sample to show how to programmatically render nodes and connectors in the diagram. We also showed how to change node properties during runtime by clicking the button. Please refer to a code example and sample below. 
 
Code example: 
 
App.component.html 
 
   <!-- define diagram --> 
                <ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]="nodes" [connectors]="connectors"></ejs-diagram> 
 
App.component.ts 
 
//Initialize nodes collection 
 public nodes: NodeModel[] = [ 
   //create node 
   { 
     id: 'node',  
     //set node size 
     width:100,height:100, 
     //set node position 
     offsetX:200,offsetY:200, 
     //set node shape 
     shape: {type:'Basic', shape: 'Ellipse'}, 
     // set node annotations 
     annotations: [ 
       {content: "Ellipse"} 
     ] 
   }, 
    { 
     id: 'node1', width:100,height:100,offsetX:400,offsetY:200, 
      annotations: [ 
       {content: "Rectangle"} 
     ] 
   } 
 ] 
 
//initialize connectors collection 
 public connectors: ConnectorModel[] = [ 
   //create connector 
   { 
     id: 'connector',  
     //set source Node id 
     sourceID: 'node',  
     //set target Node id 
     targetID: 'node1' 
   } 
 ] 
 
 
 
 
Regards, 
Shyam G 


Justus Pett
Replied On October 25, 2019 03:02 PM UTC

Hi Shyam,

thanks a lot for your help. The dataBind() method was what I was missing...

Best regards,

Justus

Shyam G [Syncfusion]
Replied On October 28, 2019 01:10 AM UTC

Hi Justus, 
Thanks for your update. 
Regards, 
Shyam G 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon