Displaying XML Data in the Internet Explorer TreeView ControlBy Scott Mitchell
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
.dllfile to your Web application's
/bindirectory, and a few other files to a specified directory (see the
README.txtfile 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:
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
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:
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
TreeViewcontainer, and an set of arbitrary many, arbitrarily nested
Textproperty 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
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
there is also an
Expanded property (which defaults to False). If you set this to
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
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
TreeViewcontainer 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)
TreeNode element must be a
<treenode> element in the XML
In a number of the XML FAQs at
ASPFAQs.com, examples are used against the XML file
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
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.xmlfile 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
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.