The magazine of the Melbourne PC User Group Treeview Control in Visual Basic Ray Watson raywatson_assist@onaustralia.com.au

The Objective

This is a very brief outline of the purpose and usage of an extremely powerful programming technique for Microsoft Access and other Microsoft Development Platforms.

One of the objectives for developers of Information Systems of all types is, and should always be to present data in a way that is easy to understand. An increasingly popular display type is a Treeview. Common examples include Windows Explorer and the SQL Server 7.0 Console. This effect is achieved in Microsoft Access with the use of special controls available during the design of an Access or Visual Basic Form. Other common controls for Forms include Text Boxes, Labels and Combo Boxes. The Treeview is created in a very similar way to a Combo Box control.

The Complaint

A very disappointing characteristic of this control, is that there is very little documentation about its usage or implementation with the Access Database program. The best source of explanation is the MSDN (Microsoft Developer Network) documentation on a two CD set that comes with Visual Studio. To the best of my knowledge it is not provided with Microsoft Office.

However, with a lot of research and a great deal of dogged determination, it is possible for any Microsoft developer to use this Treeview control in a custom designed information system. One example is shown in Figure 1.

The Basic Concepts

The individual elements (lines) of a Treeview control are called Nodes. In this example the Root Node is the Abbotsford Factory, which has child nodes of the Boundary Fence, the Main Drive and the Main Office Lawn. The Boundary Fence has three children, called Main Gate, the Delivery Boom Gate and the Carpark Gate. The Delivery Boom Gate has a child node, Dyco Electric Motor.

This control uses plus (+) and minus (-) signs to show which nodes have children. For example, the Dyco Electric Motor is the last child node, (no plus sign), while the Lockwood Padlock has other children, as indicated by the (+) sign, although these children are not currently shown.

If the operator clicked the (-) minus sign for the Boundary Fence, then only the main three nodes (large triangles) would be displayed.

Clicking a (+) plus sign, causes the child nodes to be expanded and displayed. Those people who use Windows Explorer to move or copy files will be familiar with the concept. Yes, you can program the drag and drop techniques in your own applications, if you wish. This requires quite sophisticated programming techniques to achieve reliable results though. It is quite easy to create a more conventional editing method, if the drag and drop technique is too sophisticated for the user or developer. In Figure 2 we see another variation on a Treeview control, this time with command buttons to Add, Edit or Delete nodes.

The Methodology

For this article, I am concentrating on its implementation in Microsoft Access. The principles carry over to Microsoft Visual Basic and Microsoft Visual FoxPro.

Unlike with some controls, you will need to be familiar with the Visual Basic language. I consider V: impractical to attempt implementation otherwise. To work on Access or Visual Basic Forms you need two controls in the form. The first is an ImageList control. The purpose of the ImageList control is to provide convenient storage for the node graphics, such as the large triangles or arrows you can see in the Treeview examples. Optionally, you may omit these graphics if you want a plainer version of the Treeview control. Note - it is smarter to add the ImageList control first. The ImageList control should have the Images (Bitmap or Icon Files) installed, before the Treeview control is configured. You will experience difficulties if you try to manipulate the images after the Image control has been linked to the Treeview control.

An explanation of the processes to add an ImageList control to an Access Form is provided in Figure 3.

The Steps Are:

1. In the Design View of an Access Form, use the bottom right button in the Toolbox, More Controls, to display a list of extra controls. This may include two versions of the ImageList controls. (Version 5 and 6 have only small differences).
   
2. Drag the ImageList control onto the Form. The ImageList and Treeview Controls that show in More Controls, will depend on the Code Libraries 
   installed by your Microsoft applications.
   
3. Once the ImageList control has bee placed on the form, you may insert bitmap or icon graphic images into it. Icon (*.ico) files can usually be found in abundance on your Windows hard drive, or you may like to design your own images using Paintbrush.

It is worth noting that the pictures in the control may be referred to by using Names or Numbers. The Image Index property is perhaps the most convenient way to refer to the images in your program code.

Adding the Treeview control is achieved in a manner similar to the one used to add the ImageList control. By using the More Controls button on the ToolBox, you may drag a Treeview control onto the form you are creating. Once the two controls have been placed, the real work begins.

Feeding the Treeview Control

Generally the data displayed in a Treeview control will come from one or more tables. One of the trickiest jobs is to invent a way of storing your data so that it can be easily read into the nodes of the Treeview control. A simple table design is included in Figure 4, as a starting point.

The main requirements of the table, or tables, is to store at least four basic elements.

1. A unique ID (Key) for every individual item.
2. A description
3. A reference to the item that each row "belongs" to (the parent ID).
4. Some way of identifying the level that each item belongs to (the indent factor).

1. Each key of the Treeview control must start with a letter, eg. ("K" & CStr(!IngITParent)
   
2. The ADD Method is used to add a new node, and uses the intrinsic constant tvwChild to create a new level or indent.

[About Melbourne PC User Group]