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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding to nodes and updating dynamically

Thread ID:





126370 Oct 11,2016 01:02 PM UTC Oct 14,2016 10:13 AM UTC Angular 3
Tags: ejDiagram
Aaron Bond
Asked On October 11, 2016 01:02 PM UTC

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,

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

Aaron Bond
Replied On 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...


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


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