How to expand a tree by paths?

GoJS
1

Hello, I’m trying to open a tree according to a search. So, considering this hierarchy (this is just illustrative):
demo tree

Suppose the user performs a search, and the resultant nodes are: 2, 5 and 11. The idea is to hide other paths, this means, nodes: 4, 7 and 10.

I already tried to traverse the tree and:

for (var i = 0; i < nodes.length; i++) {
            nodes[i].isTreeExpanded = true;
            myDiagram.commandHandler.expandTree(nodes[i]);
}

But none of them work. Any idea? Thanks a lot!

2

Expanding or collapsing a subtree will change the visibility of all of a node’s children.

You can set Node.visible to false on nodes 4, 6, 7, and 10. But that will cause a layout because for the purposes of layout those invisible nodes no longer exist. I don’t know if that is what you want.

Alternatively you can set Part.opacity to 0.0 on those Nodes and their parent Links. That way they disappear but there’s no layout.

Or yet another design choice is that you could add a big “X” over each of those Nodes, and make them gray too.

Remember to always make changes within a transaction, unless you call a command that already does so.

3

Hi walter, thanks! But the real problem is I can’t expand the nodes. I have the tree unfolded, and I need to expand just the ones that has no cross in the image. I could retrieve them, but then, how do I expand them? I just found a way for expanding a full level, but not a single node’s path

4

If you want to pretend that nodes 4, 6, 7, and 10 are not there at all, I recommend setting Node.visible to false on those nodes.

What do you mean by “unfolded” if you do not mean “expanded”?

Remember that when Node.isTreeExpanded is false, all of its descendants will be invisible. So, for example, if you want to show nodes 2 and 3 but not node 6, you cannot collapse node 2 because that would make node 3 invisible.

Here’s what I would do. First we need a way to get all of the Nodes and Links that form the ancestor chain for a Node:

  // Return a collection of a Node's ancestor nodes and links, including the node itself.
  function findTreeParentChain(node) {
    function add(n, coll) {
      if (n === null) return;
      coll.add(n);
      var l = n.findTreeParentLink();
      if (l !== null) {
        coll.add(l);
        add(n.findTreeParentNode(), coll);
      }
    }

    var set = new go.Set();
    if (node instanceof go.Node) add(node, set);
    return set;
  }

(This ought to be a method on Node.)

Then you want to keep showing all of the nodes and links that form the union of all of the findTreeParentChains of the nodes found by Diagram.findNodesByExample:

      var results = myDiagram.findNodesByExample(. . .);
      myDiagram.highlightCollection(results);

      var set = new go.Set();
      results.each(function(n) { set.addAll(findTreeParentChain(n)); });
      myDiagram.nodes.each(function(n) { n.visible = set.contains(n); });

Do this all within a transaction, of course, just as the Org Chart (static) sample does, Org Chart Static.