JavaScript Editor JavaScript Editor     JavaScript Debugger

Previous Section Next Section

Main Page

Tree Views

You use a tree view to display a hierarchy of nodes. Each node is not only displayed visually, but also can have child nodes. An example of this is the Windows Explorer, which uses a tree view in its left pane to display the hierarchy of folders on disk. You can expand and collapse parent nodes by clicking them; when expanded, their children are also visible. You can see a tree view control at work in Figure 10.2; this is the TreeViews example on the CD-ROM. Here, the icons you see for nodes are actually stored in an image list that I've added to the project. I've specified which icon to use with what node individually.

Figure 10.2: A tree view at work.

A tree view also can be displayed with checkboxes next to the nodes, if the tree view's CheckBoxes property is set to True. You can then check or uncheck nodes by setting the node's Checked property to True or False.

The main properties of tree views are Nodes and SelectedNode. The Nodes property contains the list of nodes in the tree view, and the SelectedNode property gets or sets the currently selected node. Nodes themselves are supported by the TreeNode class.

The Nodes collection for a node holds the node's child TreeNode objects. You can add, remove, or clone a TreeNode, and when you do, all child tree nodes are added, removed, or cloned at the same time. Each TreeNode can contain a collection of other TreeNode objects, which means you can use expressions like this: MyNode.Nodes(3).Nodes(5) to refer to child nodes (in this case, actually grandchild nodes). You also can use the FullPath property to specify nodes in terms of their absolute, not relative, locations. And you can use the Nodes collection's Add or Remove methods to add or remove nodes in code.

You can set the text for each tree node label by setting a TreeNode object's Text property. And you can display images next to the tree nodes; just assign an ImageList to the ImageList property of the parent TreeView control and assign an image to a node by referencing its index value in the ImageList property. Specifically, you set the ImageIndex property to the index value of the image you want to display when the TreeNode is in an unselected state, and set the SelectedImageIndex property to the index value of the image you want to display when the TreeNode is selected.

Tree views also support various properties for navigating through them, node by node. In particular, you can use the following properties: FirstNode, LastNode, NextNode, PrevNode, NextVisibleNode, PrevVisibleNode. To select a node from code, just assign the TreeNode object to the tree view's SelectedNode property.

Tree views are all about showing node hierarchies-the user can expand a node (showing its children) by clicking the plus sign (+) displayed next to it, or collapse a node by clicking the minus sign (-) next to it. You can do the same in code with the Expand method to expand a single node, or ExpandAll to expand all nodes, and the Collapse or CollapseAll methods to collapse nodes.

Previous Section Next Section

JavaScript Editor Free JavaScript Editor     JavaScript Editor