Binding to nodes and updating dynamically

[Aaron Bond]

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,

Aaron

[Shyam G]

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 }); 

            } 

        } 

 

Sample link:http://plnkr.co/edit/Cbmb85inb9OukVdRchH1?p=preview 

 

Help documentation:https://help.syncfusion.com/js/api/ejdiagram#methods:updatenode 

 

Regards, 

Shyam G 

[Aaron Bond]

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...

Aaron

[Shyam G]

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.  

 

Link:http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/ 

 

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html 

 

Regards, 

Shyam G