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

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

3 Replies

SG Shyam G Syncfusion Team October 24, 2019 09:16 PM

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 



JP Justus Pett October 25, 2019 07:02 AM

Hi Shyam,

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

Best regards,

Justus


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

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


Loader.
Live Chat Icon For mobile
Up arrow icon