Displaying XML Data in the Internet Explorer TreeView Control

By Scott Mitchell

Introduction

You have to tip your hat to Microsoft when it comes to the amount of free developer resources they have made available for us ASP.NET developers. First, there was the Web Matrix Project, a free GUI/RAD tool designed specifically for creating ASP.NET Web pages. Then the ASP.NET team provided the complete source code for a number of real-world ASP.NET applications, such as the ASP.NET Forums, IBuySpy.com, and the Cassini Web Server.

- continued -

In addition to this, Microsoft has released the Internet Explorer Web Controls. The IE Web Controls are a collection of four Web controls designed specifically to work with Internet Explorer's client-side DHTML capabilities. (Of course these controls render and function appropriately on browsers other than Internet Explorer, although they do not necessarily have the client-side functionality and eye-pleasing attractiveness that they do on IE.) These five controls are:

The MultiPage Web Control,
The TabStrip Web Control,
The Toolbar Web Control, and
The TreeView Web Control

This article focuses on the TreeView Web control, and how to use the TreeView Web control to display XML data in a hierarchical fashion.

For More Information on the IE Web Controls...

For more information on the IE Web Controls, check out the Internet Explorer Web Controls Reference page. To download the Web controls (which includes the complete source code), mosey on over to http://asp.net/IEWebControls/Download.aspx.

Installing the IE Web Controls

In order to start using the IE Web Controls in your ASP.NET Web application, you first need to download the IE Web Controls and install them. This article won't delve into the installation process, but rest assured, it's fairly straightforward - all you need to do is download the complete source code and run a file called build.bat, which will compile the source code. Then, you need to move the generated .dll file to your Web application's /bin directory, and a few other files to a specified directory (see the README.txt file in the download).

Once you have installed the IE Web Controls, in order to use them in your ASP.NET Web pages you need to first register them using the @Register directive like so:

<%@ Register TagPrefix="whatever" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

Typically, the TagPrefix setting is set to ie. Whatever value you choose to set this property to is the value you'll use when working with these Web controls. For example, if you set the TagPrefix to FooBar, then to add the, say, TreeView Web control to the ASP.NET Web page, you'd add the following content in the ASP.NET Web page's HTML portion:

<FooBar:TreeView runat="server" ... />

Getting Started with the TreeView Control

The TreeView Web control is designed to display hierarchical data in a tree structure, similar to the Windows Explorer. The TreeView Web control is made up of a single, mandatory TreeView container, and an set of arbitrary many, arbitrarily nested TreeNodes. The TreeNode has a Text property that specifies the textual label that is displayed for the node.

Imagine that we wanted to display a family tree using the TreeView control. One way to specify the contents of a TreeView is to do so statically. As the following example shows, the TreeView control consists of the single TreeView and then a number of nested TreeNodes:

<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %> ... <form runat="server"> <ie:TreeView runat="server"> <ie:TreeNode Text="Isaac Gibson" Expanded="True"> <ie:TreeNode Text="Birth - 1766" /> <ie:TreeNode Text="Death - 1827" /> <ie:TreeNode Text="Spouse"> <ie:TreeNode Text="Ritty Gibson" /> <ie:TreeNode Text="Married 1789" /> <ie:TreeNode Text="Children"> <ie:TreeNode Text="Phoebe Gibson"> <ie:TreeNode Text="Birth - 1790" /> <ie:TreeNode Text="Death - 1884" /> <ie:TreeNode Text="Spouse"> <ie:TreeNode Text="James K. Mason" /> <ie:TreeNode Text="Married 1819" /> </ie:TreeNode> </ie:TreeNode> <ie:TreeNode Text="John Gibson"> <ie:TreeNode Text="Birth - 1793" /> <ie:TreeNode Text="Death - 1802" /> </ie:TreeNode> <ie:TreeNode Text="Howard Gibson"> <ie:TreeNode Text="Birth - 1795" /> <ie:TreeNode Text="Death - 1863" /> <ie:TreeNode Text="Spouse"> <ie:TreeNode Text="Elizabeth Gibson" /> <ie:TreeNode Text="Married 1825" /> </ie:TreeNode> </ie:TreeNode> </ie:TreeNode> </ie:TreeNode> </ie:TreeNode> </ie:TreeView> </form>

[View a Live Demo!]

As you can see in the live demo, a family tree is displayed in a tree view. Note that in addition to the Text property of the TreeNode, there is also an Expanded property (which defaults to False). If you set this to True, the TreeNode will be expanded upon the initial page load. For example, in the above demo, the root element is expanded upon first visiting the page because its Expanded property is set to True.

Don't Forget the Web Form!

As you can see in the above source code, the TreeView control is encased in a server-side form (commonly referred to as a Web form). Be certain to always use a TreeView in a server-side form! While Internet Explorer allows for the TreeView to be utilized even if it is not within a Web form, browsers other than IE will not be able to utilize the TreeView control unless it is enclosed within a Web form...

Binding the TreeView to an XML File

While being able to statically specify the TreeNodes within the TreeView container is fine and good, the TreeView becomes more useful when we generate it via databinding. Specifically, we can bind the contents of an XML file to the TreeView. The rub of all of this is that the XML file must be in the following precise format:

<TREENODES> <treenode text="..."> <treenode text="..."> </treenode> <treenode text="..." /> ... </TREENODES>

That is, the root element of the XML file must be <TREENODES> (in all capitals) and each TreeNode element must be a <treenode> element in the XML file.

In a number of the XML FAQs at ASPFAQs.com, examples are used against the XML file aspnetbooks.xml, an XML file that contains information about ASP.NET books. Imagine that we wanted to display the book information in a TreeView control. Since the aspnetbooks.xml does not have the precise XML format that the TreeView control expects, we have one of two options:

Create an additional copy of the XML file that contains the information in the proper format, or
Use an XSLT stylesheet to dynamically transform the XML content we wish to display in the TreeView from its current format to the needed format

Option 2 is superior to option 1 since it does not require two copies, and all the headaches that keeping multiple copies up-to-date implies. However, let's take a very quick look at option 1.

Option 1: Creating a Copy of the XML Content in the Proper Format

With a bit of persistence, I edited the original aspnetbooks.xml file and made a copy, aspnetbooksTV.xml. As you can see by visiting aspnetbooks.xml, the new XML document contains the same general information, but in the format the TreeView Web control expects.

Once such a file has been created, we can bind it to the TreeView control by setting the TreeNode's TreeNodeSrc property to the new XML file's name. That is, the following syntax will display the ASP.NET books altered XML file in the TreeView control:

<form runat="server"> <ie:TreeView runat="server"> <ie:TreeNode runat="server" Text="ASP.NET Books" Expanded="True" TreeNodeSrc="aspnetbooksTV.xml" /> </ie:TreeView> </form>

[View a Live Demo!]

As you can see in the live demo, the contents of the properly-formatted XML file are displayed in the TreeView control.

In Part 2 we'll look at how to use XSLT to dynamically convert an XML's content from its given format into the format expected by the TreeView control.

Read Part 2!