Apps

Navigate hierarchical site data with ASP.NET's TreeView control

The TreeView control allows you to provide a hierarchical view of a Web site. It also allows the user to easily navigate the site by selecting nodes and drilling down (or up) to site content. It is simple to bind it to a site map via the SiteMapDataSource control. The TreeView presentation is easy to customize via the various options available with the control.

Now that you're up to speed on ASP.NET Site Map and SiteMapPath controls, I'll explore the TreeView control, which gives users an easy way to navigate a Web application. I will begin with an examination of the SiteMapDataSource control, which you may use to populate the TreeView control.

The data source

The Site Map control serves as the data source for the built-in ASP.NET navigation controls. The SiteMapDataSource control allows you to bind to site navigation data within a page. The SiteMapDataSource control's ID attribute is used to assign it to navigation controls (via the control's DataSourceID property).

The SiteMapDataSource control uses the current application's site map file. If the application contains multiple site map files, the one in the current directory (if it exists) is used. This is the control's format and syntax:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

It has various optional attributes that you may use to define the behavior and appearance of the site map used on the containing page. The following list provides a sampling of these attributes.

  • ShowStartingNode: Indicates whether the SiteMapDataSource control exposes the starting node as the site map's root or starts from the child nodes of the root node. This is a Boolean value.
  • SiteMapProvider: Allows you to use a provider other than the default provider that uses the web.sitemap file as the source.
  • StartFromCurrentNode: Signals whether the starting node for the SiteMapDataSource is the current node in the site map. This is a Boolean value.
  • StartingNodeOffset: Sets the number of levels up or down from the current starting node to set a new starting node for the data source.
  • StartingNodeUrl: Allows you to set the URL for the site map node to be used as the navigation's starting point.
When you use the SiteMapDataSource control, along with these properties, it provides control of application navigation. It's easier to grasp the SiteMapDataSource control with examples, so I'll turn my attention to the ASP.NET navigation controls used in conjunction with the SiteMapDataSource control. (Note: The SiteMapDataSource control is used with the TreeView and Menu controls, while the SiteMapPath control does not use it.) The examples in this article use the following site map:
<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="Default.aspx" title="Default Page"  description="Default page.">

<siteMapNode url="Test1.aspx" title="Test page one"  description="Test page 1" />

<siteMapNode url="Test2.aspx" title="Test page two"  description="Test page 2">

<siteMapNode url="Test3.aspx" title="Test page three"  description="Test page 3" />

</siteMapNode>

</siteMapNode>

</siteMap>

TreeView control

The TreeView control displays the site map structure in the form of a tree structure (MSDN offers a good example of TreeView). Nodes with children are expandable and collapsible via a mouse click to easily traverse the logical structure of a site and its site map. The individual elements in a TreeView control are called nodes. There are three types of nodes that you can add to a TreeView control.

  • Root: The base node of the tree. It has no parent node, but it has one or more child nodes.
  • Parent: A node that has a parent node and one or more child nodes.
  • Leaf: A node that has no child nodes.

The basic TreeView control uses this syntax:

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:TreeView>

You may populate the TreeView control dynamically or by using static items.

The DataSourceID property is assigned the name of the SiteMapDataSource control used to populate the control. The following example uses a TreeView control in a master page, so it is visible on each page that uses the master page. The SiteMapDataSource control in the example uses the default web.sitemap file as its data source.

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>TechRepublic.com Test</title>

</head>

<body>

<form id="frmMasterPage" runat="server">

<div>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">

</asp:TreeView>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

</div></form></body></html>

The TreeView control provides plenty of options for customizing its look and feel, as well as controlling its behavior. This includes styling root, leaf, parent, and the selected nodes via properties or CSS. Here is a sample of these options:

  • NodeIndent: Allows you to specify the amount of space to indent child nodes.
  • NodeWrap: Specifies whether the text displayed in each node wraps to the beginning of the next line or continues on the same line when it runs out of space.
  • CollapseImageUrl: Assigns a custom image to the graphic that is selected to collapse an expanded node.
  • ExpandImageUrl: Assigns a custom image to the graphic that is selected to expand a node.
  • ShowExpandCollapse: Signals whether the expand/collapse option is displayed. This is a Boolean value.
  • ShowLines: Signals whether lines to child nodes are displayed. This is a Boolean value.

The TreeView element supports its own set of elements to style and control the presentation. Here are some of the elements supported within the TreeView control:

  • NodeStyle: Provides control of the presentation of all nodes.
  • RootNodeStyle: Provides control of the presentation of the root node.
  • HoverNodeStyle: Provides control of nodes when the mouse moves over them.
  • LeafNodeStyle: Provides control of the presentation of leaf nodes.
  • LevelStyles: Provides control of the individual levels of the tree.
  • ParentNodeStyle: Provides control of the presentation of parent nodes.
  • SelectedNodeStyle: Provides control of the currently selected node.

The following example uses some of these elements, along with attributes of the TreeView element to control presentation.

<asp:TreeView NodeIndent="25" NodeWrap="true" ShowLines="true"" ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">

<NodeStyle ForeColor="red" />

<RootNodeStyle ForeColor="black" />

<HoverNodeStyle BackColor="yellow" />

</asp:TreeView>

You may also populate the TreeView control with static content. This approach bypasses using a backend data source like a site map and places the nodes within the TreeView control directly within the page. This code snippet demonstrates setting up a TreeView control using this approach:

<asp:TreeView  NodeWrap="true" ShowLines="true" ID="TreeView1" runat="server">

<Nodes>

<asp:TreeNode NavigateUrl="~/Default.aspx" Text="Default page">

<asp:TreeNode NavigateUrl="~/Test1.aspx" Text="Test page 1" />

<asp:TreeNode NavigateUrl="~/Test2.aspx" Text="Test page 2">

<asp:TreeNode NavigateUrl="~/Test3.aspx" Text="Test page 1" />

</asp:TreeNode>

</asp:TreeNode>

</Nodes>

<NodeStyle ForeColor="red" />

<RootNodeStyle ForeColor="black" />

<HoverNodeStyle BackColor="yellow" />

</asp:TreeView>

Programmatic control of the TreeView control is available, but it's beyond the scope of this article. Also, the TreeView control is not restricted to site navigation; you may use it with other data sources as well.

Where to go

The TreeView control allows you to provide a hierarchical view of a Web site. It also allows the user to easily navigate the site by selecting nodes and drilling down (or up) to site content. It is simple to bind it to a site map via the SiteMapDataSource control. The TreeView presentation is easy to customize via the various options available with the control. Next week, I'll wrap up the discussion of navigation controls with the Menu control.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

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

Get weekly .NET tips in your inbox TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

5 comments
camainc
camainc

This control is no longer supported by Microsoft.

Justin James
Justin James

Tony - this is a great followup to the other two articles, thanks! Most folks do not realize how simple things like this can make a much bigger impact on usability (and therefore, revenue) than many other items that have much higher visibility. J.Ja

aspatton
aspatton

The TreeView control is included in both ASP.NET 2.0 and 3.0.

aspatton
aspatton

I'm glad the article has been useful. We close with the Menu control next week.