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.
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"
|
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 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 TreeNode
s:
|
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
TreeNode
s 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.