Two-Way Data Binding Not Working in Diagram Component

[Priestly]

I have two lists (one for shapes, one for connectors) that I connect to my Diagram through props in the html.

When I run the app, the items in the shapes and connectors get displayed correctly. However, I am encountering issues when it comes to data binding.

Issues found:

- Dragging an dropping items from a symbol palette into the diagram does not add a new item to my list but the new item gets displayed in the diagram. I can see the diagram nodes in the nodes list of the diagram instance.

- Add shape, add a connector, link connector to shape, add shape causes the first connector to disappear

- Add shape, add a connector, link connector to shape, add shape causes the first connector to disappear, then if I add a new connector, the old connector reappears (still linked to the shape)

I have:

- List 1 list of shapes like { id: "id" + 3, height: 20 , width: 20, offsetX: 300, offsetY: 300 }

- List 2 of connectors like{ id: "id" + 4, sourcePointOffsetX: 80, sourcePointOffsetY: 80, targetPointOffsetX: 200, targetPointOffsetY: 200}

List 1 is passed to the nodes prop of the diagram. List 2 is passed to the connectors prop of the diagram.

I want:

- Every object in List 1 or 2 should be a rendered item in the diagram

- Changes to the objects or lists above should be reflected in the diagram instantly (i.e. if I add a new object to the list, I expect a new rendered item and vice versa: if I drop an item in the diagram, I expect a new object in one of my lists)

I tried your example at https://ej2.syncfusion.com/vue/documentation/diagram/data-binding/?no-cache=1#local-data but it has the same limitation. Any changes (let's say that every time I click a button, I add a new item to the species array) to the source do not get reflected in the diagram.

Could you please provide some guidance on how to use/implement 2-way data binding for the diagram?

Thanks

[Shyam G]

Hi Priestly, 

 

 

Query	Response
Dragging an dropping items from a symbol palette into the diagram does not add a new item to my list but the new item gets displayed in the diagram. I can see the diagram nodes in the nodes list of the diagram instance.	When we add a new node in the diagram dynamically, then that node will be automatically added in the nodes collection. Also, the collectionChange event gets triggered whenever you add new node/connector in the diagram. In this event, you will get a newly added object in the arguments element property and you can customize the new node in this event. Please refer to a help documentation, code example and the sample below.    Help documentation: https://ej2.syncfusion.com/vue/documentation/api/diagram/#collectionchange    Code example:    <ejs-diagram ref='diagramObj' style='display:block' id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'   :collectionChange='collectionChange'></ejs-diagram>      //when we add a new node into the diagram, collectionchange event triggers       collectionChange: (args) => {             if(args.state === 'Changed') {              // get nodes length               alert(diagramInstance.nodes.length)               //get connectors length                alert(diagramInstance.connectors.length)          }      },
Add shape, add a connector, link connector to shape, add shape causes the first connector to disappear  - Add shape, add a connector, link connector to shape, add shape causes the first connector to disappear, then if I add a new connector, the old connector reappears (still linked to the shape)	The reported issue happens only when you set a same id for each node and the connector. An diagram element id should be unique. Please refer to a code example below in which we have set a unique id for nodes and connectors at button click.    Code example:    methods: {      addNode: function () {         var node = {           id: 'node' + randomId(), width: 100, height: 100, offsetX:300, offsetY:300         };         //add a node at runtime         diagramInstance.add(node);      },      addConnector: function () {        var connector = {           id: 'connector' + randomId(), sourcePoint: {x:200, y:200}, targetPoint: {x:200,y:400}        };        //add a connector at runtime         diagramInstance.add(connector);      }     },

 

Also, the two way binding will not happen in the diagram control. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/151057-1178650045 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Shyam G