This is a minimalist HTML and JavaScript skeleton of the GoJS Sample treeView.html. It was automatically generated from a button on the sample page, and does not contain the full HTML. It is intended as a starting point to adapt for your own usage. For many samples, you may need to inspect the full source on Github and copy other files or scripts.
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
GoJS version 2.2.5. Copyright 1998-2022 by Northwoods Software.