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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Two-Way Data Binding Not Working in Diagram Component

Thread ID:

Created:

Updated:

Platform:

Replies:

151057 Jan 29,2020 02:34 PM UTC Jan 30,2020 12:16 PM UTC Vue 1
loading
Tags: Diagram
Priestly
Asked On January 29, 2020 03:33 PM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon