Reverting to original TreeLayout after grouping nodes in GridLayout

I’ve set the diagram up in a way that allows the user to see the nodes in a tree view, and after a button is clicked they can group the nodes based on chosen property, like a score, country, etc (the property becomes the group, layout is changed to Grid, links are hidden). Unfortunately, the operation is not properly reversed. After returning to TreeLayout nodes stay in the same place where they were in the groups.

The change reverses nicely if nodes are not added to groups. Removing this line

diagram.model.setDataProperty(nodeData, "group", currentNodeGroup);

causes the layout to rearrange into a proper tree. I’ve tried to remove the group property in a similar manner

diagram.model.setDataProperty(nodeData, "group", null);

but it changed nothing, aside from the console logging:

GraphLinksModel.setDataProperty is modifying a GraphObject, “Node#1725(nodeKey)”
Is that really your intent?

how can I get the standard tree layout back?

If Nodes are in Groups, they will obey the layout of those Groups, as the Groups act as subgraphs.

Instead of setDataProperty try calling Model.setGroupKeyForNodeData, use undefined instead of null.

If you wanted to ungroup everything you could do this inside of a transaction:

myDiagram.nodes.each(function(n){
  myDiagram.model.setGroupKeyForNodeData(n.data, undefined);
});

which should work.

Caution: that warning tells you that you passed a Node to that method, not some Node.data object in the model.

@simon
Thanks, that’s exactly what I was looking for.

@walter
I see, it makes sense now. Thanks for pointing that out