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.
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.
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:
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:
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:
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:
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.
