Two-way binding

[Dario Schmidt]

Hi,

I am evaluating the Diagram component.

I made a test where create the diagram from an array of JSONs.

public data: Object = {

        //sets the fields to bind

        id: 'Name', parentId: 'Category',

        dataManager: new DataManager(this.hierarchicalTree),

        //binds the data with the nodes

        doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {

            nodeModel.shape = { type: 'Text', content: (data as EmployeeInfo).Name };

            nodeModel.offsetX = (data as EmployeeInfo).offsetX;

            nodeModel.offsetY = (data as EmployeeInfo).offsetY;

        }

    };

I could verify that if I change the value of some property in one of the array element, for example offsetX, and invoke refresh(), the view is updated (the position node is changed).

My question is:

If the user makes a change in the view, for example dragging a node to a new position, the associate property in the datasource array is not updated (offsetX and offsetY).

If it is the normal behavior, Do i have to implement a method to listen each possible change and update the model?

Thanks.

Dario

[Shyam G]

Hi Dario, 

 

The two way binding will not happen in the diagram control. So, you can update the datasource array alone at runtime and the change in view will not be reflected in the datasource array. This is a default behavior of our diagram control. 

 

Regards, 

Shyam G 

[Marta Alonso]

Hello,

But there should be a way to store the nodes position, right?. For example an event when the node is moved or something like that?

Regards.

[Shyam G]

Hi Israel,

Could you please confirm us whether you need to save the position of nodes. if yes, you can save the diagram to retain the diagram nodes/connectors position. Please refer to the online sample link below.

online sample: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/serialization

Regards,

Shyam G

[Marta Alonso]

Hello Shyam,

Thanks for your quick response. I need to store the position of the nodes, but I do not want to save the diagram, since the position of the nodes with all the information in order to draw the diagram is stored on an external database, and this is just a representation of that model.

Therefore, I need to store in my model the position of the nodes (and all the rest of info, but the other info might not be updated)

Regards.

[Shyam G]

Hi Israel,

Please use positionChange event which triggers when we drag a node and you can track the position of node in this event. Please refer to a code example and the sample below.

Code example:

App.component.html

 

<ejs-diagram

    #diagram

    id="diagram"

    width="100%"

    height="800px"

    (positionChange)="positionChange($event)"

  >

 

App.component.ts

 

  public positionChange(args: IDraggingEventArgs) {

    if (args.state === 'Completed') {

    }

  }

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

Regards,

Shyam G