The TreeView Control - MS Access

The sample database TreeBuilder.accdb, contains the form frmNode Builder WithImages, which present an example of using the TreeView control and demonstrates a number of its features.

The TreeView control can be used as an application menu or for manipulating hierarchical data (as shown here).

The TreeView control can be used as an application menu or for manipulating hierarchical data (as shown here).

Adding the TreeView Control

Begin with a blank form. On the Design tab, click ActiveX Controls, as shown in Figure.

The option on the Design tab to add ActiveX controls to a form.

The option on the Design tab to add ActiveX controls to a form.

The Insert ActiveX Control dialog box opens, in which you can locate and select the Microsoft TreeView Control (note that your computer might have more than one version of this control).

Select a version of the ActiveX control to be installed on any computers that will use the application.

Select a version of the ActiveX control to be installed on any computers that will use the application.

Once you have added the control to the form, you can resize it to the required size. Figure shows the control added to a form at its default size.

The TreeView control when it is first added to a form.

The TreeView control when it is first added to a form.

After adding the control, in the form’s class module, add in the appropriate reference that will be needed as you start programming the control, as shown in Figure.

Selecting the Microsoft Windows Common Controls in the list of references.

Selecting the Microsoft Windows Common Controls in the list of references.

When adding references, you might need to use the Browse button to locate a particular file, but the TreeView control, which is contained in the Microsoft Windows Common Controls, should be in the list of available references.

Populating the Tree

The companion content contains a table called tblTreeNode that holds the data to be displayed in multiple trees of data. Figure shows the tblTreeNode, which in this example has been filtered for tree number 2. The nodes have a relative order reading from top to bottom, and each node holds the identifier of its parent node (ParentKey field).

Create your own table of data, which will be loaded into the TreeView control.

Create your own table of data, which will be loaded into the TreeView control.

In the form, you add some basic code to construct the nodes in the tree. It is simpler at this point to add all the nodes without specifying the exact parent/child structure, which can be subsequently added. The nodes need to have a text key, so a simple text prefix of ”X” is added to the node keys. You begin by defining variables and constants at the top of the module, as shown in the following:

Code is the added to the Open and Close events to initialize and terminate your variables:

The LoadTheTree routine generates the nodes from the RecordSet, as illustrated here:

Figure shows the tree view after a list of nodes has been added to the control, but the parent/ child relationships have not been established.

Initially you load the tree with all nodes.

Initially you load the tree with all nodes.

Quickly loading parent/child-related data into a TreeView control

Although it is possible to build a tree of data by positioning each child record correctly as it is added to the tree, this can be difficult, because there is no easy mechanism in Access to produce the data from a single table in a hierarchical form, and you cannot specify a relationship to a node that is not already loaded in the tree. It is simpler to first add all the nodes and then edit each one, specifying the relationship to the parent node; once all the nodes are created, the order in which relationships are constructed is not important.

Use the Add method to populate the tree, which creates each node, as demonstrated in Figure.

Creating nodes by using the Add method.

Creating nodes by using the Add method.

The next step is to modify the LoadTree routine by adding the following code, which maps the parent child relationships for the nodes. Keep in mind that you need to ensure that you have already created a node before referencing it as a parent node:

This will then render the tree with the correct structure. Once you have this code working, it is useful to add a DoCmd.Echo False at the beginning of the LoadTree routine and a DoCmd. Echo True at the end of the routine. This prevents screen flicker as the tree is rendered and re-organized, as shown in Figure.

The TreeView control showing the hierarchical organization of the data.

The TreeView control showing the hierarchical organization of the data.

Adding Graphics

To display images in the TreeView control, add an ImageList ActiveX control to the form, as shown in Figure.

Adding the ImageList ActiveX control to hold the images that will be used by the tree.

Adding the ImageList ActiveX control to hold the images that will be used by the tree.

Next, you need to prepare a set of graphical images for each type of node. Each type has two images: one for when the node is selected, and the other for when it is not selected. In the form’s Open event, load the images from file into the ImageList control, as shown here:

In the tblTreeNodes table, three more columns have been added to hold the references to the images to display as well as a flag to indicate whether the node is expanded by default, as shown in Figure.

You can create your own fields in your table to record which images to display on any node and whether the nodes are initially displayed as expanded.

You can create your own fields in your table to record which images to display on any node and whether the nodes are initially displayed as expanded.

You need to make the following change to the loop that loads the nodes in the LoadTree. M processing routine:

You should also now change the forms Close event, as follows:

Expanding and Collapsing Nodes

To expand or collapse a node, you set the nodes Expanded property. The following code can be used to expand or collapse the entire tree:

Drag-and-Drop

The TreeView control supports drag-and-drop, which you can use to create a TreeView and easily re-arrange items on the tree. To enable drag-and-drop, right-click the TreeView control to display the shortcut menu, click the TreeCtrl Object, and then click Properties, as shown in Figure.

The TreeView properties need to be changed to support drag-and-drop.

The TreeView properties need to be changed to support drag-and-drop.

In the TreeCtrl Properties dialog box, verify that OLEDragMode is set to 1 ccOLEDrag- Automatic, and OLEDrop Mod is set to 1 – ccOLEDropManual, as shown in Figure.

The settings in the TreeCtrl Properties window to add drag-and-drop capability to the TreeView control.

The settings in the TreeCtrl Properties window to add drag-and-drop capability to the TreeView control.

You then need to add three sections of event processing code. In the example, the TreeView control is called TreeView0; you might need to change this, check by compiling your code and verifying that all references are appropriately changed.

Referring to methods and properties in an ActiveX Control What might be a little confusing in the development of this form is that there is an ActiveX object called TreeView0 on the form. There is also a TreeView object variable called tv that during the forms Open event is set to point at the object TreeView0. The reason for having the tv object variable is that it allows you to execute a method like tv.Add because you cannot use Me.TreeView0.Add, which will not work because the TreeView0 is a external object. As an added benefit, the tv object variable supports IntelliSense for the TreeView control.

What might appear equally confusing is when we come to define an event handling procedure (in the sections that follow) called TreeView0_OLEStartDrag. The question is why we did not use tv _OLEStartDrag?

The answer is that Access can automatically hook up the event handling for the ActiveX object; which is why TreeView0_OLEStartDrag works. There is a way to use the reference to tv_OLEStartDrag, but to do that, you would have to use a special syntax called With- Events (described in Chapter 10, “Using Classes and Events”) when you declared the object variable, Dim WithEvents tv As TreeView.

The OLEStartDrag event clears the selected node, allowing a new node to be selected, as demonstrated in the following:

The OLEDragOver highlights the node as you drag over an area:

The OLEDragDrop routine is more complex because it needs to reposition the node in the new tree structure. Note that a Root node is indicated by having a null value for the Parent- Key, as illustrated here:

Deleting a Node with Recursion

When you delete a node, all the child nodes below that node should also be deleted, as follows:

This code routine is an example of recursive code, which means that the procedure keeps calling itself from within itself, nesting to the required number of levels, and then as execution at any particular level ends, it backs itself out to resume execution at the previous level.

Writing and debugging recursive VBA Code

In the previous example, you see that when you delete a node, you must delete all of the child nodes, and then for each child node, you must delete all child nodes for that child node. You need to repeat this process until all the related nodes in the tree are deleted. The example contains the following objects keys and parentkeys:

  • Forms: X123 →Parent 116, DeleteNode(X123) – Delete all with Parent 123
  • Form: X130 →Parent 123, DeleteNode(X130) – Delete all with Parent 130
  • Controls: X131 →Parent 130, DeleteNode(X131) – Delete all with Parent 131
  • Control: X132 →Parent 131, DeleteNode(X132) – Delete all with Parent 132

Later in this section, you will see that the Call Stack assists in monitoring the code, which you can use to see the depth of recursive nesting. The main problem with recursive code is in understanding how the logic branches. At first glance, it looks like the logic cannot work because it uses a single Recordset. But the key to this code is that after deleting child nodes in the loop, it uses a FindFirst to reposition on the parent record.

Recursive code can be quite difficult to debug, but it often provides a very simple solution to an otherwise complex problem. Figure shows a sequence of nodes to be deleted.

A sequence of nodes that must be deleted.

A sequence of nodes that must be deleted.

If you want to further explore how a node is deleted, then place a breakpoint in the DeleteNode subroutine.

Insert a breakpoint into the code to trace through a recursive delete operation.

Insert a breakpoint into the code to trace through a recursive delete operation.

With the form in Form view, right-click the node called Forms to display the node operations form. With this form, you can view details of a node and delete nodes. This pop-up form then calls the public code on the main form that has the TreeView control.

Using this pop-up form, you can add and delete nodes.

Using this pop-up form, you can add and delete nodes.

Next, click the Delete Node button. Tracing through the routine and examining the Call Stack illustrates the recursive nature of this routine, as shown in Figure.

The Call Stack helps you to understand how the code works.

The Call Stack helps you to understand how the code works.

Adding Nodes

The code that follows presents the two routines with which you can add nodes. The first adds the node to the bottom of the tree. You then drag the node to a particular position. The second method is to add the node as a child node to the current node. In both cases, the node is added to the data table:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MS Access Topics