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. Image for the cookie policy date

Set node position and size programmatically


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;


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,


3 Replies

SG Shyam G Syncfusion Team October 25, 2019 12:16 AM

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: 
   <!-- define diagram --> 
                <ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]="nodes" [connectors]="connectors"></ejs-diagram> 
//Initialize nodes collection 
 public nodes: NodeModel[] = [ 
   //create node 
     id: 'node',  
     //set node size 
     //set node position 
     //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' 
Shyam G 

JP Justus Pett October 25, 2019 10:02 AM

Hi Shyam,

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

Best regards,


SG Shyam G Syncfusion Team October 27, 2019 08:10 PM

Hi Justus, 
Thanks for your update. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon