This shows how to create a traditional "TreeView" in a GoJS diagram. There are 500 nodes in the tree.
Look at this page's source code to see how the properties on the TreeLayout are set.
The node template makes use of a "TreeExpanderButton" panel to implement the expand/collapse button. It also implements a custom doubleClick function to allow nodes to be expanded/collapsed on double-click. Lastly, the source of the picture on each node is bound to two different properties, Node.isTreeLeaf and Node.isTreeExpanded; the imageConverter function is used to select the correct image based on these properties.
There are two link templates in the source code, one which uses no lines, and one which connects the items with dotted lines.
See the Intro page on Buttons for more GoJS button information. The Tri-state CheckBox Tree sample demonstrates a "tree view" where each item has a three-state checkbox. The Tree Mapper sample demonstrates how to map (draw associations) between items in two trees. The Update Demo sample also uses a "tree view" for its own purposes.
The icons in this sample are from icons8.com
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS Intro.