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. Image for the cookie policy date

Binding to nodes and updating dynamically

Hi there!

I'm using the diagram control to create a BPM flowchart for a POC and I'm loving the integration.  

Unfortunately, I think I might be missing a step somewhere. I have a collection of Node models which I then bind into the diagram through the HTML template. However, when I update the collection of node models (such as with a push), the diagram does not update to reflect this.

I've put together this example to show what I am trying to achieve. Is this possible using the diagram control?

I've looked into methods like .updateData() and .refresh() but none seem to have the effect I'm expecting.

Thanks for your time,

3 Replies

SG Shyam G Syncfusion Team October 12, 2016 06:09 AM UTC

Hi Aaron, 
You can use updateNode API method to update the nodes at runtime. Please refer to the code example and modified sample link below. 
Code example: 
        function updatenode() { 
            var diagram = $("#ejControl_0").ejDiagram("instance"); 
            var node = diagram.model.selectedItems.children[0]; 
            if (node) { 
                diagram.updateNode(node.name, { width: 200 }); 
Shyam G 

AB Aaron Bond October 12, 2016 07:58 AM UTC

Hi Shyam, thank you so much for your response!

Does this mean there is no way to ensure the two-way binding for the nodes? Updating them programmatically seems to go counter to the purpose of the Angular 2 integration, since the template bindings rely heavily on updating. I would have thought that updating the node collection in my component model would cause an update on the diagram also...


SG Shyam G Syncfusion Team October 14, 2016 10:13 AM UTC

Hi Aaron, 
The angular 2 will not detect the changes which we done in our diagram’s client side events and the changes will be notified/detected only using all browser events (click, mouseover, keyup, etc.), setTimeout() and setInterval() and Ajax requests. Please refer to the link below.  
Shyam G 

Live Chat Icon For mobile
Up arrow icon