Rebuilding / reloading diagram

GoJS
1

i’m trying to have a “rebuild” button on my page where i’m displaying the diagram.
this will be used in instances where a user has expanded/collapsed all the nodes, or has edited some parent/child relationships and they wish to rebuild the diagram to the original state.

refreshing the data is not efficient as the data doesn’t change very often and mostly will only change in future releases of our app using the editing of this diagram.

i have tried to make another hidden text area to store the json data, set the modeldata to this (document.getElementById(“modelData”).value = document.getElementById(“originalData”).value;) and then calling init() but receive the following error: <span role=“presentation” =" -errorMessage hasBreakSwitch "><span ="errorMessage "> Invalid div id; div already has a Diagram associated with it.

the code looks like:
myDiagram.clear();
document.getElementById(“modelData”).value = document.getElementById(“modelDataOriginal”).value;
init();

i’ve also tried:
document.getElementById(“modelData”).value = document.getElementById(“modelDataOriginal”).value;
myDiagram.startTransaction(“rebuildDiagram”);
myDiagram.rebuildParts();
myDiagram.commitTransaction(“rebuildDiagram”);

but all that happens is the diagram clearing and nothing being rebuilt.

what is the appropriate/preferred way to reload the diagram w/o reloading the entire page?

thanks for the help.

2

Why not just set the model back to its original model?

(and do not call diagram.clear or rebuildParts at all)

This is how almost all of the samples work (eg flowchart) when you modify all sorts of things and then just press “load”, and the Diagram is “reset” back to its original state.

load does nothing but set the model to a new model, referencing the initial JSON.

3

thanks for the help.
i ended up calling load() and some custom functions for sorting/expanding after the initial load.

4

I think its a great question. I’d love to use the console for development purposes as opposed to building the project from scratch.

Is there an alternative way to either remove the diagram from the div and then run code again,
or can you please post a demo of setting a diagram in the console window, removing it, adding it again. Thanks

5

To disassociate a Diagram from its HTML DIV element, just set Diagram.div to null.

Then you are free to create a new Diagram that is associated with the existing DIV element.