The TreeView control in ASP.NET is used to populated hierarchical data structure. There are scenarios in which we are not aware of the number of nested collections in the data source. In those circumstances it is wise to use recursion and populate the TreeView control. In this article we are going to demonstrate how to populate the TreeView control with N levels.

Populating Simple TreeView Control:

Let's first take a look at simple example in which we will demonstrate how to populate a TreeView control without using recursion. In this example we will use a one level nested structure. The two classes used are "Category" and "Product" and they are defined below:

Although the Product class exposes SubProducts but we are not going to use it for this example. The code used to populate the TreeView control is shown below:

The BindDataSimple method simply calls the DataAccess.GetCategories which returns a List<Category> filled with dummy data. Inside BindDataSimple method we iterate through the collection and create TreeNode. Then inside the category instance we iterate through the products and populate the child nodes to the existing TreeNode. Finally, the nodes are added to the TreeView control. The CollapseAll method is invoked to make sure that all nodes are collapsed when displayed on the screen.

Take a look at the following screen shot which shows the nested TreeView in action.

Although the TreeView is displayed and function correctly but it is limited to one level of nesting. We need to make sure that the TreeView is able to populate with N level of nested objects. In the next section we are going to show how to achieve N level nesting with the use of recursion.

Populating TreeView with N Level Nesting:

The concept of N level nesting revolves around the fact that a TreeView control should be able to display objects which have a detailed nested hierarchy. Consider a folder structure on your local hard drive. The C drive contains folders and then each folder has files and sub folders and then each sub folder has other folders and files and this continues to N levels of folders.

First, we will create such a N level hierarchy and then assign it to the TreeView control. The following implementation shows a hierarchy.

As, you can see in the code above each category consists of a product, each product consists of a sub product, each sub product consists of a sub sub product and this can go on forever. Now, let's take a look at the recursive method which is responsible for populating the TreeNode.

The BuildTree method is called in a recursive fashion to populate the TreeNode object. For the sake of simplicity we are using "Name" as a common field to fetch from each object. You can use an array of fields to look for in the object instance. The following method utilizes the BuildTree method and populates the TreeView control.

The screenshot of the TreeView control is shown below:

In the next section we will use the directory structure to populate our TreeView control.

Populating Directory Structure for TreeView Control:

In the beginning of the article we referenced towards the directory structure and how it can be displayed in the TreeView control. In this section we are going to implement it. Instead of starting at the C: we will start at C:\Projects which contains some Visual Studio projects.

The recursive method for this scenario is little different and shown below:

The BuildDirectoryTree takes in the path of the root folder and an empty TreeNode instance. Inside the method the TreeNode is populated with the current files in the directory and also the current directories inside the root directory. Each directory is sent back to the BuildDirectoryTree method to be populated again.

The following code uses the BuildDirectoryTree method.

The result is shown below:


In this article we learned how to populate the TreeView control of depth N. We also learned how to iterate through the folder structure and list all the files and the folders recursively. In the future article we will demonstrate how to use Ajax with the TreeView control.

[Download Sample]