Update programatically and dynamicaly node or connector properties

[Camila BlancFick]

Hi! 

I would like to know if there is another way to update node or connector properties, rather than diagram.updateData()? Or how to use it properly?

I have a problem with  diagram.updateData(), because it requires an object of Type Node or Connector (both Classes) (see  Angular Diagram API component - Syncfusion) and I receive the changes* from an object of Type NodeModel or ConnectorModel (interfaces). 

When I call this.diagram.updateData(changedNode as Node); it throws

core.js:6479 ERROR Error: Uncaught (in promise): Error: Not Found
Error: Not Found
    at Ajax.stateChange (ej2-base.es2015.js:4062:28)
    at httpRequest.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (ej2-base.es2015.js:3993:64)
    at XMLHttpRequest.wrapFn (zone.js:763:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28659:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
    at invokeTask (zone.js:1600:1)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1626:1)
    at resolvePromise (zone.js:1213:1)
    at resolvePromise (zone.js:1167:1)
    at zone.js:1279:1
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28659:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:582:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
    at invokeTask (zone.js:1600:1)

*changes could have any property changed, e.g. node: { style:  { strockWith:5 } }, or change its position.

Regards,
Camila

[Aravind Ravi]

Hi Camila,

We have created a sample to change the node and connector properties. Through the diagram getObject public API method we can able to get the node and connector. In the getObject method pass the node’s or connector’s id which you want to change. After getting the node through the node’s style property you can able to change node appearance and the node offset property is used to change the node’s position.

public ChangeNode() {

    let node: NodeModel = this.diagram.getObject('sdlc');

    node.style.fill = 'red';

    node.offsetX = 100;

    node.offsetY = 100;

    this.diagram.dataBind();

  }

 

  public ChangeConnector() {

    let connector: ConnectorModel = this.diagram.getObject('connector1');

    connector.style.strokeColor = 'blue';

    connector.style.strokeWidth = 5;

    this.diagram.dataBind();

  }

Sample: https://stackblitz.com/edit/angular-dq4jp8?file=app.component.ts

Regards

Aravind Ravi

[Camila BlancFick]

Thank you very much 

[Aravind Ravi]

Hi Camila,

Most Welcome.

Regards

Aravind Ravi