Tree Diagram is not updating dynamically like http push for add nodes

[gnsnach]

Similar to http POST with subscribe and push method in Angular, managed to update the diagram dynamically on the view of new node in the Treee model,

But after applying all kind of methods from GoJs like updateTargetBindings(this.ObjectData), with start and commit transactions for http.put and delete, and call the function mergeDataArray with diagrams are not getting updated dynamically, where I need to refresh it again to see the updated node of the diagram. But the respective subscribe is getting updated and console output is confirmed that the http.put or delete function is working well as per the console outputs in the development mode.

Request your help on getting the dynamic update of diagram automatically.

Like…

addRec() {
this.service.addRecord(this.service.newRecord, environment.url_post).subscribe(pos)(
console.log(‘success’)
this.diagram.mode.startTransaction()
this.diagram.model.addNodeData(this.addData)
this.diagram.model.commitTransaction()
this.diagram.model.nodeDataArray.push
console.log(this.addData)
});

Above addRec function works well, but delete function with removeNodeData is not getting updated in the diagram

delRec() {
this.service.deleteRecord(this.service.delRecord, environment.url_del).subscribe(del)(
this.delData = del
var id = this.diagram.model.containsNodeData(this.delData)
console.log(id)
this.diagram.mode.startTransaction()
this.diagram.model.removeNodeData(this.delData)
this.diagram.model.commitTransaction()
this.diagram.updateAllRelationshipsFromData()
this.diagram.updateTargetBindings()
this.diagram.rebuildParts()
console.log(this.delData)
});
}

[walter]

Could you please format your code properly? There seem to be typos and missing characters in them too.

To format code blocks, markdown requires surrounding the code with lines consisting of triple backquote.

Code Formatting

This forum supports Github Flavored Markdown Standard Markdown converts text with four spaces at the beginning of each line into a code block; GFM also supports fenced blocks. Just wrap your code in ``` (as shown below) and you won’t need to indent it by four spaces. For example: ```js console.log('hello world'); ``` will output: console.log('hello world'); Other choices for language include C#, Visual Basic, JSON and XML.

[gnsnach]

Ok… there might be error in brackets at the end… As the function is with http Observable one of the normal bracket shows as typo error…

But the two functions: Add and Delete are as below in the quotes, where the delete function includes the rebuild method and still the respective object with that id is not removed… Only upon refresh it is getting cleared in the diagram.

this.service.addRecord(this.service.newRecord, environment.url_post).subscribe(pos)
console.log(‘success’)
this.diagram.mode.startTransaction()
this.diagram.model.addNodeData(this.addData)
this.diagram.model.commitTransaction()
this.diagram.model.nodeDataArray.push
console.log(this.addData)

this.service.deleteRecord(this.service.delRecord, environment.url_del).subscribe(del)
this.delData = del
var id = this.diagram.model.containsNodeData(this.delData)
console.log(id)
this.diagram.mode.startTransaction()
this.diagram.model.removeNodeData(this.delData)
this.diagram.model.commitTransaction()
this.diagram.updateAllRelationshipsFromData()
this.diagram.updateTargetBindings()
this.diagram.rebuildParts()
console.log(this.delData)

[walter]

There’s still incomplete code there. OK, I’ll assume there’s no actual call to Array.push.

The naming of the local variable “id” is suspicious, since Model.containsNodeData returns a boolean. I assume that doesn’t really matter because you only seem to use it for debugging.

What is the value of del that is coming into this code? Is it the value of some Node.data?

Second, you should perform all changes within a transaction. So you need to move your call to commitTransaction after the calls to *Diagram.update… and Diagram.rebuildParts.

BUT it turns out that you do not need to call those update… and rebuild… methods at all. Committing a transaction should update everything based on all of the changes that the model knows about.

And that code is particularly redundant because rebuildParts will discard everything and rebuild all of the Nodes and Links, causing the general calls to update… to be totally worthless.

[gnsnach]

Agree, as am still developing the knowledge in both Angular and JS request your help to overcome this situation…
Your assumption is correct, checking this whether it is able to retrieve the right info or not… and the value is Boolean

OK will test and let you know upon bringing the 2 update methods inside transactions and will remove the rebuild method

[gnsnach]

Hi Wlater,

Thanks and removed all the update methods and just recalled http get method after the commit transactions… And the Diagram is upto date after the removal of node.

Thanks a lot