1. Home
  2. Forum
  3. Vue
  4. Two-Way Data Binding Not Working in Diagram Component

Two-Way Data Binding Not Working in Diagram Component

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


1 Reply
SG Shyam G Syncfusion Team January 30, 2020 12:16 PM UTC

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. 
 
 
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. 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Shyam G 


Loader.
Up arrow icon