Site Navigation

The TreeView Web Server Control

ASP.Net 2.0 introduces many new controls including a TreeView Control, which can be used to consume information from hierarchical data sources like an XML file and then display that information. In this tutorial, I am going to statically data bind the TreeView control with the contents of an XML file.

You can also programmatically access the TreeView object model to dynamically create trees, populate nodes, set properties and so on. The TreeView control consists of nodes and there are three types of nodes that you can add to a TreeView control.

• Root - A root node is a node without a parent node. • Parent - A node that has a parent node and one or more child nodes • Leaf - A node that has no child nodes

While a typical tree has only one root node, the 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 main root node, as in a list of product categories.

Displaying Data using TreeView Control

You can display static data in the TreeView control by creating a collection of TreeNode elements that are children of the TreeView control. These child elements are also known as child nodes.

The following example shows the markup for a TreeView control that contains three nodes, two of which have child nodes.

<asp:TreeView ID="MyTreeView" Runat="server"> <Nodes> <asp:TreeNode Value="Book1" Expanded="True" Text="1"> <asp:TreeNode Value="Chapter1" Text=" Chapter1" /> <asp:TreeNode Value="Chapter2" Text=" Chapter2" /> </asp:TreeNode> <asp:TreeNode Value=" Book2" Text="2" /> <asp:TreeNode Value=" Book3" Expanded="True" Text="3"> <asp:TreeNode Value=" Chapter1" Text=" Chapter1" /> </asp:TreeNode> </Nodes> </asp:TreeView>

Binding Data using TreeView Control

You can bind a datasource control like XmlDataSource and SiteMapDataSource controls with TreeView control. In addition to that, when binding data, you have complete control over which fields are populated from the data source

Using Multiple Options in TreeView Control

Primarily the TreeView control is not for the web site navigations. But it can be used for all sorts of things to present a hierarchical list. It has a significant feature to put check boxes next to nodes which the hierarchical items in the list. with the help of these check boxes, the user can make multiple selections. The TreeView control has a property called ShowCheckBoxes that creates check boxes next to many different types of nodes within a list of items.

The ShowCheckBoxes property has the following values:

All: To set check boxes to each and every node within the TreeView control. Leaf: To set check boxes to only node that have no extra child elements. None: To not set check boxes to any node within the TreeView control. Parent: To set check boxes to only the considered as parent node within the TreeView control. A node is said to parent, if has at least one child node. Root: To set check boxes to any root node contained within the TreeView control.

<asp:TreeView ID="MyTreeView" Runat="server" DataSourceID=?xmlDatasource? ShowCheckBoxes=?Leaf?> . . . </asp:TreeView> Also, set it programmatically using code: MyTreeView.ShowCheckBoxes = TreNodeTypes.Leaf ;