Software Development

Display hierarchical data in VB.NET with the TreeView control

Whenever you need to display hierarchical data in a tree-like format in VB.NET, you should use the TreeView control. In this tip, Irina Medvinskaya presents an example that uses the TreeView control for Windows-based applications.

If you need to show hierarchical data in a tree-like format in VB.NET, you should use the TreeView control. This flexible control allows you to change numerous properties in order to fit your needs. The TreeView control also lets you add nodes and sub-nodes; you have the option of adding the nodes in design-time, but you will usually do this in run-time.

Example: Using TreeView for Windows-based applications

To add the TreeView control to your form, open the Toolbox, find the TreeView control under the Common controls section, and double-click it.

To add the nodes in design time, click the Control properties and then click Nodes. You will see a screen similar to Figure A that allows you to add nodes and sub-nodes. Figure A

Figure 1

To add nodes in run-time, run the following example. First, add this code to the form load event:

With TreeView1

             .BeginUpdate()

             .Nodes.Add("Node0")

             .Nodes(0).Nodes.Add("Node1")

             .Nodes(0).Nodes.Add("Node2")

             .Nodes.Add("Node3")

             .Nodes(1).Nodes.Add("Node4")

             .Nodes(1).Nodes.Add("Node5")

             .Nodes.Add("Node6")

             .Nodes(2).Nodes.Add("Node7")

             .EndUpdate()

         End With

Then add this event:

Private Sub TreeView1_AfterSelect(ByVal sender As System.Object, ByVal e As System.Windows.Forms.TreeViewEventArgs) Handles TreeView1.AfterSelect

         MessageBox.Show(TreeView1.SelectedNode.FullPath())

 End Sub
The result will look like Figure B. Figure B

Figure B

Here are notes about the example code:

  • I add the code to prevent the control from being refreshed.
  • I add the first node by using the Nodes.Add method and passing to it the name of the node.
  • I add sub-nodes to the initial node and follow this strategy for three top-level nodes.
  • In order to know which node/sub-node combination is selected, I use the AfterSelect event of the TreeView control and use the MessageBox to display the SelectedNode.FullPath.

Learn more about the TreeView control

There are a number of properties that you can set up for the TreeView control in order to fit your needs both in behavior and display. The control lets you show check boxes or icons next to the nodes' names, displaying plus/minus signs, and a number of other options. Visit MSDN for more information about using the TreeView control.

Irina Medvinskaya has been involved in technology since 1996. She has an MBA from Pace University and works as a project manager at Citigroup.

----------------------------------------------------------------------------------------

Get Visual Basic tips in your inbox

Advance your scripting skills to the next level with TechRepublic's free Visual Basic newsletter, delivered each Friday. Automatically subscribe today!

11 comments
soumitraghosh29
soumitraghosh29

This is good when two level of data is displayed. What happens when there are multiple levels of data which moves into 3rd or 4th level?

Tony Hopkinson
Tony Hopkinson

I like Tree Views, but don't go nutty with them. Don't over do the number of levels or items. A few of extra tips. If the tree node is linked to an item represented by a class instance , use the tag property to point to it. Be careful though if you are doing unmanaged stuff, that tag may end up pointing to the wrong thing . If you are doing managed, remember that until you delete the node or reset tag, the GC will not release the memory. The above however can get long winded on big lists so defer populating the child nodes until (and if the user selects one) Avoid iterating through treeview.items to find a node, again in a big list that will get expensive.

noblesolution2
noblesolution2

Like your approach... 'he wants to know about the TreeView control... So tell him.' Too often when looking for help with code or a control the author explains how to build the computer, design a web site and somewhere in there is a vague reference to the object in question. Feel that Microsoft help leads the way... Thanx

josefrutos11
josefrutos11

Nice article, thanks !!!! Jose Frutos software developer

ryoung19
ryoung19

There are no figures ie Figure A and Figure B.

Justin James
Justin James

TreeView is great, and displays certain types of data particularly well, but one caution I have is to not get too nuts with it. Some folks love giving every node a different little icon which is confusing, or dumping thousands of nodes in it which simply is not usable to a user. J.Ja

JustDave
JustDave

Did you try clicking the hyperlinks?

ryoung19
ryoung19

Figures A and B are conspicuous in their absence.

underoverflow
underoverflow

Note to TechRepublic authors & editors: (1) This article and *some* others on the site have embedded hyperlinks which are neither underlined nor coloured differently, making it not obvious they are there. This is particularly troublesome for those who print articles. A suggestion would be to add this issue to your editing guidelines. (2) even better in cases like this, would it not be possible to simply include the image within the body of the article, as most other articles do? thanks for listening.

MaryWeilage
MaryWeilage

Thank you for the excellent suggestion. I have added the figures to the body of this VB tip. Thanks again, Mary Weilage

Editor's Picks