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.

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

When you select “Edit Nodes…” the IDE will open the TreeView Node Editor dialog (see Figure 2).

Figure 2: TreeView Node Editor Dialog

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:

<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
   <asp:TreeNode Text="Book Categories" Value="Book Categories">
      <asp:TreeNode Text="Web Development" Value="Web Development">
      <asp:TreeNode Text="ASP.NET" Value="ASP.NET"
                    NavigateUrl="~/example1.aspx?id=1"></asp:TreeNode>
      <asp:TreeNode Text="Web Services" Value="Web Services"
                    NavigateUrl="~/example1.aspx?id=2"></asp:TreeNode>
      <asp:TreeNode Text="JSP" Value="JSP"
                    NavigateUrl="~/example1.aspx?id=3"></asp:TreeNode>
   </asp:TreeNode>
   <asp:TreeNode Text="Windows Development"
                 Value="Windows Development">
      <asp:TreeNode Text="Windows Forms" Value="Windows Forms"
                    NavigateUrl="~/example1.aspx?id=4"></asp:TreeNode>
      <asp:TreeNode Text="ActiveX Controls" Value="ActiveX Controls"
                    NavigateUrl="~/example1.aspx?id=5"></asp:TreeNode>
      <asp:TreeNode Text="Smart Client" Value="Smart Client"
                    NavigateUrl="~/example1.aspx?id=6"></asp:TreeNode>
      </asp:TreeNode>
   <asp:TreeNode Text="Component Development"
                 Value="Component Development">
      <asp:TreeNode Text="COM" Value="COM"
                    NavigateUrl="~/example1.aspx?id=7"></asp:TreeNode>
      <asp:TreeNode Text="DCOM" Value="DCOM"
                    NavigateUrl="~/example1.aspx?id=8"></asp:TreeNode>
      <asp:TreeNode Text="Remoting" Value="Remoting"
                    NavigateUrl="~/example1.aspx?id=9"></asp:TreeNode>
      </asp:TreeNode>
   </asp:TreeNode>
</Nodes>
</asp:TreeView>

As you can see, the Value property contains the same text as the Text property by default. You can change it if you want.

Now, write the following code in the SelectedNodeChanged event of the TreeView control:

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
   Label1.Text = "You Selected " + TreeView1.SelectedNode.Text
                                 + " category";
}

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:

protected void Page_Load(object sender, EventArgs e)
{
   switch (Request.QueryString["id"])
   {
      case "1":
         Label1.Text="You selected ASP.NET category";
         break;
      case "2":
         Label1.Text="You selected Web Services category";
         break;
      case "3":
         Label1.Text="You selected JSP category";
         break;
      case "4":
         Label1.Text="You selected Windows Forms category";
         break;
      case "5":
         Label1.Text="You selected ActiveX category";
         break;
      case "6":
         Label1.Text="You selected Smart Client category";
         break;
      case "7":
         Label1.Text="You selected COM category";
         break;
      case "8":
         Label1.Text="You selected DCOM category";
         break;
      case "9":
         Label1.Text = "You selected Remoting category";
         break;
   }
}

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.

Figure 3: Sample Run of Example1.aspx

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:

  1. Creating and adding tree nodes on the fly
  2. Improving performance with “on demand” population
  3. 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.

Figure 4: Setting the PopulateOnDemand Property

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read