Expand subtree only to next level and collapse all level and save the state of the diagram

GoJS
1

Hi,
I have a requirement where i have to display the root node and it’s immediate child all the nodes will have expander button and child will also have multiple levels.

  1. On click of button i want to expand only till next level.
  2. On click of button again i want to close all the expanded nodes till leaf node.
  3. Now if i click again on the button it should open the next level one instead of opening all the level nodes which was opened earlier.

Is there a way to save the state of the diagram because if i add a new child my diagram will get reload so i want to keep the nodes opened as they were.
I was trying to use the oldNodeDataArray but i expander button changes the isTreeExpanded field value but it is not there in the nodeDataArray.

2

You may want to set Node.wasTreeExpanded to false in your Node template and then, in a “TreeCollapsed” DiagramEvent listener, set that to false on all of the children of each collapsed (sub)tree Node. That way, on the next expand of that parent node, the children will not also be expanded.

Do you have a TwoWay Binding on the Node.isTreeExpanded property?

3

@walter I have set the isTreeExpanded to false in my node template .
No i didn’t add two way binding on the isTreeExpanded. Can you help me how to to save the diagram are state do that i can use it again if i make any changes the in the diagram.

4

Please read Data Binding | GoJS

On your Node template, if you are using GraphObject.make, add:

$(go.Node, . . .,
  new go.Binding("isTreeExpanded").makeTwoWay(),

Or if you are using constructor initialization, call:

new go.Node(. . .)
  .bindTwoWay("isTreeExpanded")