Use ASP.NET 2.0's TreeView to Display Hierarchical Data

Real-world Web sites need professional navigation structures. In classic ASP, developers used either custom code or third-party solutions to provide navigational elements such as TreeViews and Menus. Fortunately, ASP.NET 2.0 comes with these controls built-in. They provide not only good-looking navigational structure but also save developers from needing to write lots of code and script.

This article examines the TreeView control, which you use to display hierarchical data. For example, suppose your Web site sells products that belong in various categories. You may want to arrange the product information on category and subcategory bases. The same categorization is applicable for the Web site pages. You may want to display them in certain categories such as Products, Services, and Support. TreeView comes handy in all such cases.

Some Basics

Before delving into the details of TreeView, get acquainted with the basics first.

The TreeView control is represented by the mark tag <asp:TreeView> and the corresponding class System.Web.UI.WebControls.TreeView. TreeView consists of one or more nodes represented by the TreeNode class. The tree nodes are represented in the markup by <asp:TreeNode> tag. The following table lists some of the important properties of TreeNode class:

Property

Description

Text

This property specifies the text that appears for that node.

Value

This property specifies a value that can be accessed programmatically when the node is clicked or expanded.

NavigateUrl

This property points to the URL of the page where the user is navigated after clicking on the node.

Target

This property indicates the destination for the URL represented by the NavigateUrl property (new windows, current windows, and so forth).

ImageUrl

This property points to the image file that is displayed for the node.

ToolTip

This property indicates the text that is displayed when the user hovers the mouse over the TreeNode text.

ImageToolTip

This property indicates the text that is displayed when the user hovers the mouse over the TreeNode image.

Adding Nodes Manually

Now that you know some basics of TreeView and TreeNode, you can follow the first example, which illustrates how to set up the TreeView manually. (Click here to download the accompanying code for the examples.)

Create a new Web site in VS.NET or Visual Web Developer (VWD). Add a Web form called Example1.aspx. Drag and drop a TreeView control and a Label control on it. From the smart tags of TreeView (see Figure 1), select "Edit Nodes".

Figure 1: Smart Tag of TreeView Control

Related Articles

Using the toolbar of the dialog, add tree nodes as shown in Figure 2. For each node, set Text and NavigateURL properties to appropriate values. In this example, you will enter the NavigateUrl property to ~/example1.aspx?id=1 for the ASP.NET node, ~/example1.aspx?id=2 for the Web services node, and so on. Once you finish the visual design of the TreeView, the resultant markup generated should resemble the following:

The SelectedNodeChanged event is raised when you click on the TreeNode. In the code, you simply set the Text property of the label to some message. Notice how you retrieved the Text of the selected node. In a similar fashion, you can retrieve the Value property of the selected node.

If you run the sample at this stage, it will work as expected for nodes that do not have the NavigateUrl property set and fail for the other nodes. This happens because the SelectedNodeChanged event is raised only for the nodes that do not have NavigateUrl property set. When you set the NavigateUrl property, you are directly navigated to the destination page. To trap such a selection, write the following code in the Page_Load event of the Web form:

Remember that you set the NavigateUrl property of various nodes to Example1.aspx, passing a query string parameter called "id". In the Page_Load event, you trap this parameter to decide which link was clicked. Depending on the value of this query string parameter, you display different messages. Figure 3 shows a sample run of your Web form.

Adding Nodes Programmatically

The previous example added nodes to TreeView at design time. However, in the real world, many times the data that you want to display in the TreeView resides in a database like SQL Server or Oracle. That's when you need to add tree nodes via code.

In the following example, you will build a TreeView that will display all the customers from the Customers table of the Northwind database. Selecting a customer node will add its order IDs as child nodes. This example demonstrates three things:

Creating and adding tree nodes on the fly

Improving performance with "on demand" population

Filling the TreeView with data from the SQL Server database

Add a new Web form to the Web site you created previously. Drag and drop a TreeView control and add a root node to it with the Text property set to "Customers". Be sure to set its PopulateOnDemand property to true (see Figure 4). This property plays a significant role in dynamically generated TreeViews. Many times, it is not practical to populate all the nodes and child nodes of TreeView in advance. Doing so can drastically affect the performance of your Web form. The PopulateOnDemand property helps you handle such situations. When you set this property to true, clicking that node raises an event called TreeNodePopulate. Inside the TreeNodePopulate event, you write the logic to populate child nodes of the node. This way, various nodes are populated on demand.