Incremental Tree Button always displaying

GoJS
1

i’m implementing the expander button for my tree.
i’ve been able to get the expanders to work and such, except that for the last node in the tree, the button is always visible.

the example shows how is this done, to a point. as in, it randomly creates child nodes and is hard to step through in firebug to see what is actually going on.

here is snippits of my code, could you point me in the direction or show me what i’m doing wrong?

$(“TreeExpanderButton”, {
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Center,
click: function (e, obj) { // OBJ is the Button
var node = obj.part; // get the Node containing this Button
if (node === null) return;
e.handled = true;
var diagram = node.diagram;
diagram.startTransaction(“CollapseExpandTree”);

                var data = node.data;                    
                if (!data.everExpanded) {
                    // only create children once per node
                    diagram.model.setDataProperty(data, "everExpanded", true);

                    var numchildren = createSubTree(data);//THIS ALWAYS HAS CHILDREN

//HOW CAN I FIND THE CHILDREN COUNT FOR JUST THIS NODE? OR IS THERE A BETTER WAY TO NOT //SHOW THE EXPAND BUTTON THAN THIS?
if (numchildren === 0) { // now known no children: don’t need Button!
obj.visible = false;
}
}

                // this behavior is generic for most expand/collapse tree buttons:
                node.isTreeExpanded = !node.isTreeExpanded;  // expand or collapse
                diagram.commitTransaction("CollapseExpandTree");
                }
            }
        )  // end TreeExpanderButton
2

First, have you seen the Introduction page about subtrees: http://gojs.net/latest/intro/subtrees.html? If you don’t need to dynamically create the children for a node, you don’t need to do what you have written in your node template. So if the whole tree is present, you don’t need to write a click event handler for that button.

You can look at the definition of “TreeExpanderButton” – it’s in Introduction to Buttons.

You’ll note that the visibility of the TreeExpanderButton is dependent on Node.isTreeLeaf. That property is automatically computed based on whether there are links coming out of a Node. (Or coming in, if you have changed the value of Diagram.isTreePathToChildren.)

3

thank you for the help. it was a little confusing at first

my second part to this question is, how can i set it so that only the top 3 levels are expanded when the tree is loaded?

i’ve searched the forum and found a mention of this in: Add filter post but i do not see where to get the level from, or how/where to walk the tree. i’ve looked in the properties of Node but there is no “Level” property for this.

would doing this take place inside of the nodeTemplate?

4

If there were a “level” property on Node, it would be meaningless because the value would need to be different based on which node you are counting levels from.

See this post that I have updated. Basically, call Node.expandTree and/or Node.collapseTree, as needed, depending on the state of the tree.

5

thanks for the updated post, but i’m still having issues.
where and how do i make the call to this.

when call this, i receive an error that Node.collapseTree is not a function.

6

Are you sure that you are calling “collapseTree(…)” on an instance of a Node?

7

i’m guessing i’m not getting the instance of the node.

how and where would i get the instance of the node?

i apologize if my questions seem elementary but i’m having a hard time following the documentation/samples/technicial reference to find some answers w/o the ability to search the entire tech reference and api.

8

If you have downloaded and unzipped the site.zip that you can get from http://gojs.net/latest/doc/download.html, you can do all of the searching that you like.

I suggest you search the API for “Tree”, although most things are on either the Node class or the Diagram class. Also, there are the TreeModel and TreeLayout classes, but that probably doesn’t matter for you now.

Are you just looking to expand the layers of nodes starting with the root node? You can use Diagram.findNodeforKey or Diagram.findNodeForData to get a particular Node. Also, you could call Diagram.findTreeRoots to get an iterator for all “root” nodes.

9

i’m looking to expand the first 2 tiers of the tree (and possibly more based on a user input depending on further requirements).
i don’t think right now i could use the methods you mentioned to get a particular node since i don’t know the keys

10

Then use Diagram.findTreeRoots() to get the root Node (or Nodes if the diagram is a forest).

11

excellent!
this works very well

the solution was to:
set the isTreeExpanded: false on the node definition of the template

and then:
var nodes = myDiagram.findTreeRoots();
while (nodes.next()){
var node = nodes.value;
node.expandTree(2);
}

thanks for the help w/ this