January 15, 2021
Hot Topics:

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

  • By Bipin Joshi
  • Send Email »
  • More Articles »

Next, open the smart tag of the TreeView control and set Data Source to XmlDataSource1 (see Figure 8).

Figure 8: Smart Tag of TreeView After Selecting Data Source

Then, select the "Edit TreeNode Databindings..." option to open the TreeView DataBindings Editor (as shown in Figure 9). This dialog allows you to establish data bindings between the XmlDataSource control and the TreeView control.

Click here for a larger image.

Figure 9: TreeView Databindings Editor

Under available data bindings, the dialog will automatically display the nesting of the XML file. Select "category" and click the Add button. To set the data binding, select "categoty" under the Selected data bindings list and set the TextField property to name. Note that name is an attribute of the <category> tag. By doing so, you indicate that you want to display the value of the name attribute of the <category> tag in the node. Similarly, select subcategory and set TextField and NavigateUrlField properties to name and url, respectively.

The above operations generate the following mark up for you:

<asp:TreeView ID="/img/2006/04/TreeView1" runat="server"
      <asp:TreeNodeBinding DataMember="category"
                           TextField="name" />
      <asp:TreeNodeBinding DataMember="subcategory"
                           TextField="name" NavigateUrlField="url" />

Note how each data binding that you established in the TreeView Databindings Editor is represented by a <asp:TreeNodeBinding> markup tag.

Finally, write some code in the Page_Load event of the Web form and SelectedNodeChanged event of the TreeView to display a message when a user selects a node (as you did in the first example). The following code shows these event handlers (they are very much the same as you wrote in the first example):

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

A sample run of the Web form will look exactly like Figure 3, except this time the TreeView is populated from the XML file.

A Neat, Flexible Way to Display Hierarchical Data

A professional-looking navigation system is a must for any Web site. The ASP.NET 2.0 TreeView control provides a neat and flexible way to display hierarchical data. The TreeView can be populated statically at design time or dynamically at runtime. You also can establish data binding between a TreeView and an XML file via the XmlDataSource control.

Download the Code

Download the code that accompanies the examples in this article.

About the Author

Bipin Joshi is the founder and owner of BinaryIntellect Consulting, where he conducts professional training programs on .NET technologies. He is the author of Developer's Guide to ASP.NET 2.0 and co-author of three WROX press books on .NET 1.x. He also is a Microsoft MVP, member of ASPInsiders, MCAD, and MCT.

Page 3 of 3

This article was originally published on April 19, 2006

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date