posted on:12/5/2004 9:59:54 PM
ASP.NET 2.0 introduces a new control named TreeView that provides a seamless way to consume information from hierarchical data sources such as an XML file and then display that information. You can use the TreeView control to display information from a wide variety of data sources such as an XML file, site-map file, string, or from a database. In this article, we will discuss this new control in depth and understand how to use this feature rich control in your ASP.NET applications. Apart from statically data binding the TreeView control with the contents of an XML file, we will also demonstrate how to populate this control dynamically by adding nodes at runtime. Finally, we will see how to apply XSL transformation on XML data before displaying that information in a TreeView control.
download source code
Hierarchical Data
One of the important ways of organizing data which now pervades IT is hierarchical data. ASP.NET has a series of controls that make it both easy and logical to utilize hierarchical data. TreeView is one of the important controls that can be easily bound to data source controls such as SiteMapDataSource, XmlDataSource to display hierarchical information. Before we go onto take a look at the TreeView, let us understand the common types of hierarchical data. Now that we have looked at some examples of hierarchical data, let us look at the support provided by ASP.NET in terms of handling hierarchical data. ASP.NET provides the following hierarchical data source controls. The architecture of TreeView control is very similar to the design of controls for tabular data. It is data bound to any of the above hierarchical data source controls to display the information. TreeView Control The ASP.NET 2.0 TreeView control is a completely new control introduced with ASP.NET 2.0 that is available under the Standard tab in the Toolbox . You can use the TreeView control in any situation in which you need to display hierarchical data. For example, you can use this control when displaying a navigation menu, displaying database records from database tables in a Master/Detail relation, displaying the contents of an XML document, or displaying files and folders from the file system. It is also possible for you to 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 that has no parent node. 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 easiest way to use the TreeView control is to specify a static set of tree nodes. For example, you can use the TreeView control to display a simple navigational menu for a Web site. Or, you can use the TreeView control to display the table of contents for a help file. You specify the appearance of a static TreeView control by declaring one or more TreeNode controls within the TreeView controls <Nodes> tag. The following code demonstrates how to declare a TreeView control and a root node.
< asp : TreeView Runat ="Server" ExpandImageUrl ="Images/closed.gif" CollapseImageUrl ="Images/open.gif" OnTreeNodePopulate ="Node_Populate" ID ="tvwauthors">
< Nodes >
< asp : TreeNode Text ="Authors" PopulateOnDemand =true Value ="0" />
</ Nodes >
</ asp : TreeView >