Tree view control in asp.net 2.0

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.

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.

• Folders - The way folders are structured in a Windows file system denotes a hierarchical way of storing data.
• XML - XML documents are self-describing meaning that the metadata that is required to qualify the data is actually contained in the XML document itself providing a flexible way of handling XML data.
• SiteMap - Sitemap is nothing but an XML format that provides a consistent way of describing the navigation structure of a web site including all the pages contained in that web site.
• Menu system - A menu system can also use an XML document as its input and displays the contents of the XML document in a hierarchical manner.

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.

• XmlDataSource - This control allows you to bind to XML data, which can come from a variety of sources such as an external XML file, a DataSet object and so on. Once the XML data is bound to the XmlDataSource control, this control can then act as a source of data for other data-bound controls such as TreeView and Menu. For example, you can use the <asp:XmlDataSource> control to represent a hierarchical XML data source.
• SiteMapDataSource - This control basically retrieves the site map information from the web.sitemap file.

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 control's <Nodes> tag. The following code demonstrates how to declare a TreeView control and a root node.

<asp:TreeViewRunat="Server"ExpandImageUrl="Images/closed.gif"

CollapseImageUrl="Images/open.gif"OnTreeNodePopulate="Node_Populate"

ID="tvwauthors">

<Nodes>

              <asp:TreeNodeText="Authors"PopulateOnDemand=trueValue="0"/>

</Nodes>

</asp:TreeView>

As you can see in the above code, the root node is declared using the asp:TreeNode inside the Nodes element. Each node has a Text and a Value property. The value of the Text property is displayed in the TreeView, while the Value property is used to store any additional data about the node, such as data passed to the post back event associated with the node. The text displayed through 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, you can set the node's NavigateUrl property to a value other than an empty string ("").

Get more information

Can't find what you're looking for? Try Google Search!

	Web eshwar123.blogspot.com