This diagram demonstrates the expansion of a tree where nodes are only created "on-demand", when the user clicks on the "expand" Button.

As you expand the tree, it automatically performs an animated force-directed layout, which will make some room for the additional nodes. Remember that you can use control-mouse-wheel to zoom out and zoom into the diagram.

The data for each node is implemented by the SimpleData class. It defines an EverExpanded property that indicates whether we have already created all of its "child" data and added them to the model. The EverExpanded property defaults to false, to match the initial value of go:Node.IsTreeExpanded="False" in the node DataTemplate, which specifies that the nodes start collapsed.

When the user clicks on the "expand" Button, the button click event handler finds the corresponding SimpleData by going up the visual tree to find the Node and then getting its Data. If SimpleData.EverExpanded is false, the code creates a random number of SimpleData children for that node, each with a random Color property. Each new SimpleData has a unique Key that is composed by appending the parent's Key with the new Color. Then the button click event handler changes the value of Node.IsExpandedTree, thereby expanding or collapsing the node.

Some nodes result in there being no children at all. In this case the Button is made invisible.

All changes are performed within a transaction. You should always surround your code with StartTransaction and CommitTransaction.

The diagram's Diagram.Layout is an instance of ForceDirectedLayout. The standard conditions under which the layout will be performed include when nodes or links or group-memberships are added or removed from the model. This particular ForceDirectedLayout also includes the condition that changing the visibility of any node or link will cause another layout. In this case that means that when the user expands or collapses a node, another force-directed layout occurs again.