The ASP.NET 2.0 TreeView Control

By Thiru Thangarathinam

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 ("").

Customizing the Appearance of the TreeView Control

The TreeView control provides ImageUrl properties such as RootNodeImageUrl, ParentNodeImageUrl, and LeafNodeImageUrl. These custom images are rendered to the left of the node's text. You can override the default image for the node type using the ImageUrl property. The TreeView control also provides CollapseImageUrl and ExpandImageUrl properties for the expanded and collapsed indicators. These are usually represented by plus and minus icons. There is also a property named NoExpandImageUrl that can be used for rendering an image for nodes which have no children. You can turn off the default image using the ShowExpandCollapseboolean property.

In addition to custom images, the TreeView control also supports TreeNodeStyle properties for each node types. These style properties override the NodeStyle property, which applies to all node types. A node can also have a different style applied when it is selected. When Selected property is set to true, the node is selected and the SelectedNodeStyle properties overrides any corresponding unselected style properties for the selected node. It is also possible for you to render check boxes between the node and image by setting the ShowCheckBoxes property to a boolean value.

Implementation

Now that we have understood the theory behind the TreeView controls, let us look at the following examples.

  • How to use the TreeView control to display site navigation structure
  • How to implement TreeView data binding with an XML file
  • How to dynamically populate nodes in a TreeView control
  • How to perform XSL transformation on XML data before displaying that information through a TreeView control

Let us start our implementation by discussing the first example in the above list.

Using the TreeView Control to Display Site Navigation Structure

In this example, we will use the TreeView control to display hierarchical information about the site structure using the contents of the web.sitemap file. In the web.sitemap file, you specify the list of nodes that specify the navigation structure of the site, which can be completely independent of the site folder layout or other structure. When a SiteMapDataSource is placed on the page, it will specifically look for a file with that name and then read the contents of the web.sitemap file and consume that information. Once the information is available in the data source control, you can then bind a TreeView control to the data source control to display that information in the web page.

Fire up Visual Studio 2005 and create a new ASP.NET Web Site named TreeView by selecting New Web Site from the File menu. In the New Web Site dialog box, click the Browse button and select Local IIS as the location and click Open. In the New Web Site dialog box, enter http://localhost/MyProjects/15Seconds/TreeView as the location of the web site. Then click OK.

Once the project is created, add a web.sitemap file by selecting Add New Item from the Web Site menu. In the Add New Item dialog box, select Site Map and click Add. This will result in a new file named web.sitemap being added to the web site.

Modify the code in the web.sitemap file to look as shown below.

<?xmlversion="1.0" encoding="utf-8" ?>

<siteMap>

<siteMapNodetitle="Home" url="~/default.aspx" >

<siteMapNodetitle="Introduction to ASP.NET"

url="~/introduction/default.aspx">

<siteMapNodetitle="What's New in Whidbey?"

url="~/introduction/whatsnew.aspx"/>

<siteMapNodetitle="Introduction to Visual Web Developer"

url="~/introduction/vwd.aspx"/>

</siteMapNode>

<siteMapNodetitle="Building A Web Application"

url="~/development/default.aspx">

<siteMapNodetitle="Building a Simple Application"

url="~/development/simple/default.aspx">

<siteMapNodetitle="Sharing Code Between Pages"

url="~/development/simple/codedirectory.aspx"/>

</siteMapNode>

</siteMapNode>

</siteMapNode>

</siteMap>

Now that we have the web.sitemap file created, let us create a new ASP.NET Web Form and name it as SiteNavigation.aspx. To the newly added web form, add a TreeView and SiteMapDataSource controls to it. Set the ExpandImageUrl and CollapseImageUrl properties of the TreeView control to "Images/closed.gif" and "Images/open.gif" respectively. Then set the DataSourceID property of the TreeView to the ID of the SiteMapDataSource control we added earlier. After modification, the code should look like the following.

<%@ PageLanguage="C#"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:TreeViewDataSourceID="SiteMapDataSource1"

ExpandImageUrl="Images/closed.gif"

CollapseImageUrl="Images/open.gif"ID="TreeView1"

Runat="server">

</asp:TreeView>

</div>

<div>

<asp:SiteMapDataSourceID="SiteMapDataSource1"Runat="server">

</asp:SiteMapDataSource>

</div>

</form>

</body>

</html>

When you execute the above code, you will see an output that is somewhat similar to the following screenshot.


Figure 1

The advantage of using the TreeView control with a SiteMapDataSource is that Web site navigation information can be maintained in a central location. The default provider for the SiteMapDataSource control is the XmlSiteMapProvider, which retrieves site navigation information from the web.sitemap file. Note that the web.sitemap file must always appear in the root directory of your ASP.NET application.

Implementing TreeView Data Binding with an XML File

In this example, we will bind the TreeView control to an XML file. To accomplish this, you need to go through the following two steps.

  • Add an XmlDataSource control to the page and set its DataFile property to the name of the XML File
  • Then add a TreeView control and set its DataSourceID property to the ID of the XmlDataSource control.
  • Then map the nodes and their attributes in the XML file to the TreeView nodes by declaring the asp:TreeNodeBinding elements as part of the TreeView declaration.

For the purposes of this example, let us create an XML file named Categories.xml that looks like the following.

<?xmlversion='1.0'?>

<!-- This file represents a fragment of a Categories inventory database -->

<Categories>

<CategoryID="1" Name="Beverages">

<DescriptionValue="Soft drinks, coffees, teas, beers, and ales"/>

</Category>

<CategoryID="2" Name="Condiments">

<DescriptionValue="Sweet and savory sauces, relishes, spreads, and

seasonings"/>

</Category>

<CategoryID="3" Name="Confections">

<DescriptionValue="Desserts, candies, and sweet breads"/>

</Category>

<CategoryID="4" Name="Dairy Products">

<DescriptionValue="Cheeses"/>

</Category>

</Categories>

Once the XML file is created, create a new Web Form named TreeViewDataBinding.aspx and modify its code to look like the following.

<%@ PageLanguage="C#"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

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

<headrunat="server">

<title> Binding TreeView Control with an XML File</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:TreeViewExpandImageUrl="Images/closed.gif"

CollapseImageUrl="Images/open.gif"ID="TreeView1"

Runat="server"DataSourceID="XmlDataSource1">

<DataBindings>

<asp:TreeNodeBindingDataMember="Category"

ValueField="ID"TextField="Name">

</asp:TreeNodeBinding>

<asp:TreeNodeBindingDataMember="Description"

ValueField="Value"

TextField="Value">

</asp:TreeNodeBinding>

</DataBindings>

</asp:TreeView>

</div>

<div>

<asp:XmlDataSourceID="XmlDataSource1"Runat="server"

DataFile="~/Data/Categories.xml">

</asp:XmlDataSource>

</div>

</form>

</body>

</html>

The above code listing contains a TreeView control that is bound to an XML file through an XmlDataSource control. This is accomplished by setting the DataSourceID property of the TreeView control to the XmlDataSource control. The TreeView associates properties of individual TreeNode objects to attributes of XML nodes in the hierarchy. When you perform data binding, attributes in the individual XML elements are promoted to properties of the data item. Also note that the TreeView hierarchy exactly matches the hierarchy of the source XML. Because of this, you normally construct the XML specifically for binding to the TreeView.

Executing the above code results in the following output.


Figure 2

Now that we have understood how to statically bind an XML file to a TreeView control, let us now understand the steps involved in dynamically populating the treeview control with contents from a database.

Dynamically Populating Nodes in the TreeView

In this section, you will dynamically populate the nodes in the TreeView with data from the database. The first level of nodes will represent master data — in this case, authors. When users click a node, the child nodes for that author will be created by making a query to the database that fetches all the titles for that particular author. For this example, let us create a new web form named DynamicTreeView.aspx and modify its code to look like as shown below.

<%@ PageLanguage="C#"%>

<%@ ImportNamespace="System.Data"%>

<%@ ImportNamespace="System.Data.SqlClient"%>

<%@ ImportNamespace="System.Configuration"%>

 

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

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

<headrunat="server">

<title>Dynamic Population of the TreeView Control</title>

<scriptrunat=server>

void Node_Populate(object sender,

System.Web.UI.WebControls.TreeNodeEventArgs e)

{

if(e.Node.ChildNodes.Count == 0)

{

switch( e.Node.Depth )

{

case 0:

FillAuthors(e.Node);

break;

case 1:

FillTitlesForAuthors(e.Node);

break;

}

}

}

 

void FillAuthors(TreeNode node)

{

string connString = System.Configuration.ConfigurationSettings.

ConnectionStrings["NorthwindConnnection"].ConnectionString;

SqlConnection connection = new SqlConnection(connString);

SqlCommand command = new SqlCommand("Select * From

authors",connection);

SqlDataAdapter adapter = new SqlDataAdapter(command);

DataSet authors = new DataSet();

adapter.Fill(authors);

if (authors.Tables.Count > 0)

{

foreach (DataRow row in authors.Tables[0].Rows)

{

TreeNode newNode = new

TreeNode(row["au_fname"].ToString() + " " +

row["au_lname"].ToString(),

row["au_id"].ToString());

newNode.PopulateOnDemand = true;

newNode.SelectAction = TreeNodeSelectAction.Expand;

node.ChildNodes.Add(newNode);

}

}

}

 

void FillTitlesForAuthors(TreeNode node)

{

string authorID = node.Value;

string connString = System.Configuration.ConfigurationSettings.

ConnectionStrings["NorthwindConnnection"].ConnectionString;

SqlConnection connection = new SqlConnection(connString);

SqlCommand command = new SqlCommand("Select T.title,

T.title_id From titles T" +

" Inner Join titleauthor TA on

T.title_id = TA.title_id " +

" Where TA.au_id = '" + authorID + "'", connection);

SqlDataAdapter adapter = new SqlDataAdapter(command);

DataSet titlesForAuthors = new DataSet();

adapter.Fill(titlesForAuthors);

if (titlesForAuthors.Tables.Count > 0)

{

foreach (DataRow row in titlesForAuthors.Tables[0].Rows)

{

TreeNode newNode = new TreeNode(

row["title"].ToString(), row["title_id"].ToString());

newNode.PopulateOnDemand = false;

newNode.SelectAction = TreeNodeSelectAction.None;

node.ChildNodes.Add(newNode);

}

}

}

 

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

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

CollapseImageUrl="Images/open.gif"

OnTreeNodePopulate="Node_Populate"ID="tvwauthors">

<Nodes>

<asp:TreeNodeText="Authors"PopulateOnDemand=true

Value="0"/>

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

The above code consists of two utility methods named FillAuthors and FillTitlesForAuthors, which are used to retrieve the list of authors and the list of titles for a specific author respectively. The FillAuthors method starts by retrieving the connection string from the web.config file by invoking the ConnectionString property of the ConnectionStringSettings class. The connection string is defined in the web.config as shown below.

<connectionStrings>

<addname="NorthwindConnnection"

connectionString="server=localhost;database=Pubs;uid=

sa;pwd=test"/>

</connectionStrings>

Once the connection string is retrieved, it then creates an instance of the SqlConnection object passing in the connection string as an argument to its constructor. After that it creates SqlCommand, SqlDataAdapter, and DataSet objects. Then it fills the DataSet object with the results of the sql query execution by invoking the Fill method of the DataSet object. Then the code loops through all the rows contained in the DataTable adding them one at a time to the TreeView control. The implementation of the FillTitlesForAuthors is very similar to the FillAuthors method except that it executes a different query in this case. While constructing the query, it also uses the author id value that is retrieved from the currently selected node.

Now that we have had a look at the code for the methods, let us look at the declaration of the TreeView control. The TreeView control associates the OnTreeNodePopulate method with an event handler named Node_Populate. The Node_Populate method simply checks the depth of the node and it is 0, it invokes the FillAuthors method and if it is 1, it invokes the FillTitlesForAuthors method. As part of the TreeView declaration, we also set the PopulateOnDemand property of the asp:TreeNode element to true. This property allows you to indicate that the node will be populated dynamically through the code.

If you execute the above code, you will see the following output.


Figure 3

Transforming XML Data and Displaying that Information in a TreeView Control

It is also possible for you to transform the XML data before it is displayed by the TreeView control. You can do this by setting the TransformFile property of the XmlDataSource control. This is very useful in scenarios when the original XML structure is not suitable for display through the TreeView control. In that case, you can transform the XML data using XSL and then bind that transformed XML to the TreeView control.

As with the XML data, you typically load the style sheet from a file, indicated by the TransformFile property, but you can also use it in string form directly using the Transform property.

For the purposes of this example, we will use the Categories.xml file that we used in our previous example. We will transform the categories.xml file using a Stylesheet named categories.xsl. Code for the categories.xsl file is shown below.

<xsl:stylesheetversion="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:templatematch="/">

<categories-list>

<xsl:for-eachselect="//Categories/Category">

<category>

<xsl:attributename="id">

<xsl:value-ofselect="@ID"/>

</xsl:attribute>

<xsl:attributename="name">

<xsl:value-ofselect="@Name"/>

</xsl:attribute>

<xsl:elementname="desc">

<xsl:attributename="value">

<xsl:value-ofselect="Description/@Value"/>

</xsl:attribute>

</xsl:element>

</category>

</xsl:for-each>

</categories-list>

</xsl:template>

</xsl:stylesheet>

Now that we have created the XSL, let us create a new page that exercises the above XSL. To this end, create a new page named TreeViewXmlTransformation.aspx and modify its code to look like the following.

<%@ PageLanguage="C#"%>

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

<headid="Head1"runat="server">

<title>XML Transformation</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:TreeViewID="TreeView1"Runat="server"

ExpandImageUrl="Images/closed.gif"

CollapseImageUrl="Images/open.gif"

DataSourceID="XmlDataSource1">

<DataBindings>

<asp:TreeNodeBindingDataMember="category"

ValueField="id"TextField="name">

</asp:TreeNodeBinding>

<asp:TreeNodeBindingDataMember="desc"

ValueField="value"TextField="value">

</asp:TreeNodeBinding>

</DataBindings>

</asp:TreeView>

<asp:XmlDataSourceID="XmlDataSource1"Runat="server"

DataFile="~/Data/Categories.xml"

TransformFile="~/Data/Categories.xsl"/>

</div>

</form>

</body>

</html>

As you can see from the above code, the ValueField and TextField attributes of the asp:TreeNodeBinding element are set to the new XML element names that are produced by the XML. If you execute the above code, you will see an output that is somewhat similar to the following screenshot.


Figure 4

As you can see from the above screenshot, the root node is shown as categories-list, which is produced as a direct result of the XSL transformation.

Conclusion

In this article, we have understood the features of the new ASP.NET 2.0 TreeView control and how to use that in your web applications. We also demonstrated how to consume the site navigation structure from the web.sitemap and then display that information in a TreeView control. We also discussed the implementation of populating treeview nodes dynamically with the contents from the database. We also understood how to apply XSL transformation on XML data before displaying that information in a TreeView control.



Downloads

Comments

  • Er beats by dre opgivet eller ikke absolut esser monster beats

    Posted by wanzixiao on 06/04/2013 12:53pm

    [url=http://www.kbhretelefonerbillig.webstarts.com/]Køb høretelefoner billig[/url] ikke blot disse hovedtelefoner kommer beriget med den nyeste teknologiske trends, men de kommer også i trendy stilarter og smukke farver, så de hårde dem kan vælge de hårde farver og resten som pr deres normale valg. Den stereoanlæg kvaliteten af hver af hovedtelefonerne er udestående. “Vi tror på kvalitet, og det er grunden til, vi tilbyder dem i den højeste kvalitet til de mest gennemførlige satser”, erklærede en af bestyrelsesmedlemmerne. Hovedtelefoner beats også omfatte en ny sort, der er på høje ender.Virksomheden ser en stigende kurve af overskud og tager sigte på at nå til en større del af det digitale samfund. [url=http://www.beatsbydrdredanmark.moonfruit.com/]beats by dre danmark[/url] Beats By Dr. Dre Beats Wireless har annonceret et trådløst Bluetooth-headset. Dette er udformningen af den populære Solo HD og kan let kobles med en smartphone eller tablet. Den nye model er også udstyret med ControlTalk, med en mikrofon i øret og alle nødvendige kontroller. Beats By Dr. Dre introducerer Beats trådløse Bluetooth hovedtelefoner Beats By Dr. Dre Beats introducerer den trådløse Bluetooth-hovedtelefoner lytteren fuld musikalsk frihed. [url=http://www.beatsbydrehretelefoner.weebly.com/]beats by dre høretelefoner[/url] Enhver Beats altid går, som vil komme op med en god måde undersøgelse. Det kunne gives, at disse headsets ikke kan være grundlæggende for dig, hvis du virkelig nyde populær musik, især dem, hvad personen virkelig nyde måde i processen. Det er udskiftelige pandebånd, bemærkelsesværdige gode, vil sammen med fuldstændig struktur bidrage til at gøre entusiaster sammen med fashionistas identisk tegn op, der vil disse smukke ørepropper. For virkelig at drage fordel af en persons sang alle nødt til at bruge en top-end sortiment af headset og også kombinere med bare Ogre Tilskyndelse tilfældigvis at være uden tvivl det faktum, at. Vedrørende afslapning, er de fleste en af de bedste, og giver en overordentlig fast golf greb om en persons trommehinder. Så igen, tæt forbundet med ville betyde disse ferie trygt og sikkert for din venture..

    Reply
  • AVOhLY IT aL kiX sSRw tm

    Posted by TDusdQZWwk on 02/13/2013 07:40am

    buy tramadol online without a prescription tramadol for cats - buy tramadol mastercard

    Reply
  • ATTACHMENT

    Posted by JON on 05/04/2012 08:40pm

    THE SOURCE CODE WAS NOT FOUND PLEASE CHECK THAT AND THE COULDN'T WORLK THANKS

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Businesses are moving more and more of their customer transactions to the web. Security is understandably a top concern as online transactions increase, so it is important to make sure your electronic signature provider meets the highest security standards. That means more than simply passing a security audit or obtaining a certification. This white paper provides recommendations for taking a broader view of e-signature security, and answers key questions that help identify the security requirements against …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds