System.Web.UI.WebControls.TreeView Class

Displays hierarchical data, such as a table of contents, in a tree structure.

See Also: TreeView Members


[System.ComponentModel.Designer("System.Web.UI.Design.WebControls.TreeViewDesigner, System.Design, Version=, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", "System.ComponentModel.Design.IDesigner")]
public class TreeView : HierarchicalDataBoundControl, System.Web.UI.ICallbackEventHandler, System.Web.UI.IPostBackDataHandler, System.Web.UI.IPostBackEventHandler


In this topic:


The System.Web.UI.WebControls.TreeView control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure and supports the following features:


The System.Web.UI.WebControls.TreeView control is made up of nodes. Each entry in the tree is called a node and is represented by a System.Web.UI.WebControls.TreeNode object. Node types are defined as follows:

A node can be both a parent and a child, but root, parent, and leaf nodes are mutually exclusive. Several visual and behavioral properties of nodes are determined by whether a node is a root, child, or leaf node.

Although a typical tree structure has only one root node, the System.Web.UI.WebControls.TreeView control allows you to add multiple root nodes to your tree structure. This is useful when you want to display item listings without displaying a single root node, as in a list of product categories.

Each node has a TreeNode.Text property and a TreeNode.Value property. The value of the TreeNode.Text property is displayed in the System.Web.UI.WebControls.TreeView, while the TreeNode.Value property is used to store any additional data about the node, such as data that is passed to the postback event that is associated with the node.

A node can be in one of two modes: selection mode and navigation mode. By default, a node is in selection mode. To put a node into navigation mode, set the TreeNode.NavigateUrl property for the node to a value other than an empty string (""). To put a node into selection mode, set the TreeNode.NavigateUrl property for the node to an empty string ("").


Some Internet browsers have a limitation that can affect the performance of the System.Web.UI.WebControls.TreeView control. For example, Microsoft Internet Explorer 6.0 has a URL character limit of 2067 characters that it posts. If the number of characters in a URL of a node is larger than that number, expanding that node will fail and no exception is thrown.

Static Data

The simplest data model of the System.Web.UI.WebControls.TreeView control is static data. To display static data using declarative syntax, first nest opening and closing <Nodes> tags between the opening and closing tags of the System.Web.UI.WebControls.TreeView control. Next, create the tree structure by nesting <asp:TreeNode> elements between the opening and closing <Nodes> tags. Each <asp:TreeNode> element represents a node in the tree and maps to a System.Web.UI.WebControls.TreeNode object. You can set the properties of each node by setting the attributes of its <asp:TreeNode> element. To create child nodes, nest additional <asp:TreeNode> elements between the opening and closing <asp:TreeNode> tags of the parent node.

Binding to Data

The System.Web.UI.WebControls.TreeView control can also be bound to data. You can use either of two methods to bind the System.Web.UI.WebControls.TreeView control to the appropriate data source type:

When binding to a data source where each data item contains multiple properties (such as an XML element with several attributes), a node displays the value that is returned by the ToString method of the data item, by default. In the case of an XML element, the node displays the element name, which shows the underlying structure of the tree but is not very useful otherwise. You can bind a node to a specific data item property by specifying tree node bindings using the TreeView.DataBindings collection. The TreeView.DataBindings collection contains TreeNodeBinding objects that define the relationship between a data item and the node that it is binding to. You can specify the criteria for binding and the data item property to display in the node. For more information on tree node bindings, see System.Web.UI.WebControls.TreeNodeBinding.


A malicious user can create a callback request and get data for the nodes of the System.Web.UI.WebControls.TreeView control that the page developer is not displaying. Therefore, security of the data must be implemented by the data source. Do not use the TreeView.MaxDataBindDepth property to hide data.

Dynamic Node Population

Sometimes, it is not practical to statically define the tree structure because the data source returns too much data or because the data to display depends on information that you get at run time. Because of this, the System.Web.UI.WebControls.TreeView control supports dynamic node population. When the TreeNode.PopulateOnDemand property for a node is set to true, that node gets populated at run time when the node is expanded. To populate a node dynamically, you must define an event-handling method that contains the logic to populate a node for the TreeView.TreeNodePopulate event.

Browsers that support callback scripts can also take advantage of client-side node population. (This includes Internet Explorer 5.5 and later and some other browsers.) Client-side node population enables the System.Web.UI.WebControls.TreeView control to populate a node using client script when users expand the node, without requiring a round trip to the server. For more information on client-side node population, see TreeView.PopulateNodesFromClient.

Customizing the User Interface

There are many ways to customize the appearance of the System.Web.UI.WebControls.TreeView control. First, you can specify a different style (such as font size and color) for each of the node types.

If you use cascading style sheets (CSS) to customize the appearance of the control, use either inline styles or a separate CSS file, but not both. Using both inline styles and a separate CSS file could cause unexpected results. For more information on using style sheets with controls, see ASP.NET Web Server Controls and CSS Styles.

The following table lists the available node styles.


The style settings for a node when the mouse pointer is positioned over it.


The style settings for the leaf nodes.


The default style settings for a node.


The style settings for the parent nodes.


The style settings for the root node.


The style settings for a selected node.

You can also control the style of nodes at specific depths within the tree by using the TreeView.LevelStyles collection. The first style in the collection corresponds to the style of the nodes at the first level in the tree. The second style in the collection corresponds to the style of the nodes at the second level in the tree, and so on. This is most often used to generate table of contents–style navigation menus where nodes at a certain depth should have the same appearance, regardless of whether they have child nodes.


If a style is defined for a certain depth level using the TreeView.LevelStyles collection, that style overrides any root, parent, or leaf node style settings for the nodes at that depth.

Another way to alter the appearance of the control is to customize the images that are displayed in the System.Web.UI.WebControls.TreeView control. You can specify your own custom set of images for the different parts of the control by setting the properties shown in the following table.


The URL to an image displayed for the collapsible node indicator. This image is usually a minus sign (-).


The URL to an image displayed for the expandable node indicator. This image is usually a plus sign (+).


The URL to the folder containing the line images used to connect parent nodes to child nodes. The TreeView.ShowLines property must also be set to true for this property to have an effect.


The URL to an image displayed for the non-expandable node indicator.


You do not need to customize every image property. If an image property is not explicitly set, the built-in default image is used.

The System.Web.UI.WebControls.TreeView control also allows you to display a check box next to a node. When the TreeView.ShowCheckBoxes property is set to a value other than TreeNodeTypes.None, check boxes are displayed next to the specified node types.


The TreeView.ShowCheckBoxes property can be set to a bitwise combination of the System.Web.UI.WebControls.TreeNodeTypes enumeration member values.

Each time the page is posted to the server, the TreeView.CheckedNodes collection is automatically populated with the selected nodes. When check boxes are displayed, you can use the TreeView.TreeNodeCheckChanged event to run a custom routine whenever the state of a check box changes between posts to the server.


The System.Web.UI.WebControls.TreeView control provides several events that you can program against. This allows you to run a custom routine whenever an event occurs. The following table lists the events that are supported by the System.Web.UI.WebControls.TreeView control.


Occurs when the check boxes of the System.Web.UI.WebControls.TreeView control change state between posts to the server.


Occurs when a node is selected in the System.Web.UI.WebControls.TreeView control.


Occurs when a node is expanded in the System.Web.UI.WebControls.TreeView control.


Occurs when a node is collapsed in the System.Web.UI.WebControls.TreeView control.


Occurs when a node with its TreeNode.PopulateOnDemand property set to true is expanded in the System.Web.UI.WebControls.TreeView control.


Occurs when a data item is bound to a node in the System.Web.UI.WebControls.TreeView control.


The System.Web.UI.WebControls.TreeView control does not have built-in scrolling. To add scrolling, place the System.Web.UI.WebControls.TreeView control in a System.Web.UI.WebControls.Panel control and add scrollbars to the System.Web.UI.WebControls.Panel control. For more information, see Panel Web Server Control Overview.


The markup rendered by default for this control might not conform to accessibility standards. For details about accessibility support for this control, see ASP.NET Controls and Accessibility.

Declarative Syntax




Namespace: System.Web.UI.WebControls
Assembly: System.Web (in System.Web.dll)
Assembly Versions:
Since: .NET 2.0