Windows Systems Administrator Jupitermedia US-CT-Darien Post A Job | Post A Resume

Published: Wednesday, May 14, 2003

In Part 1 we examined how to use the TreeView Web control to not only display a static hierarchy, but also how to display a hierarchy that came from an XML data source (so long as the XML was in a proper format). In this second and final part, we'll see how to use XSLT stylesheets to convert a given XML data source into the format expected by the TreeView control.

Converting a Given XML File Into the Proper Format
XSLT, which stands for eXtensible Stylesheet Language Transform, is a technology designed to convert XML from one format to another. A thorough discussion of XSLT is beyond the scope of this article; for more information read the FAQ What is XSLT? and check out the XSL section on XMLFiles.com.

In order to convert our initial aspnetbooks.xml to the proper XML format, we need to concoct an XSLT stylesheet. Once we have this XSLT stylesheet, we can specify in the TreeNode that it should use a stylesheet to transform the specified XML by using the TreeNodeXsltSrc property like so:

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

The XSLT stylesheet needed depends on the XML file's format. For the aspnetbooks.xml XML file, the following XML format will transform the XML into the format expected by the TreeView control:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'> <xsl:template match="/books"> <TREENODES> <xsl:for-each select="book"> <treenode> <xsl:attribute name="text"> <xsl:value-of select="title" /> </xsl:attribute> <treenode> <xsl:attribute name="text"> Price - $<xsl:value-of select="@price" /> </xsl:attribute> </treenode> <treenode text="Authors"> <xsl:for-each select="authors/author"> <treenode> <xsl:attribute name="text"> <xsl:value-of select="text()" /> </xsl:attribute> </treenode> </xsl:for-each> </treenode> <treenode> <xsl:attribute name="text"> Year Published - <xsl:value-of select="year" /> </xsl:attribute> </treenode> </treenode> </xsl:for-each> </TREENODES> </xsl:template> </xsl:stylesheet>

Notice that to specify the attribute of an element in XSLT, you need to use the <xsl:attribute name="AttributeName"> tag. For example, to specify the text property of the <treenode> element, we have to use:

<treenode> <xsl:attribute name="text"> Value of text attribute </xsl:attribute> ... </treenode>

With this XSLT stylesheet created and saved as aspbooks2treeview.xsl, all we need to do is specify this filename in the TreeNode's TreeNodeXsltSrc property. The following code and associated live demo shows how to use XSLT stylesheets to dynamically convert an XML document to the format required by the TreeView control.

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

[View a Live Demo!]

Conclusion
In this article we examined the TreeView IE Web Control, one of the four IE Web Controls provided for free from Microsoft. This article only scratched the surface of the TreeView Web control, illustrating how to display a static hierarchy as well as a hierarchy from an XML data source.

In addition to the capabilities we examined in this article, the TreeView Web control has a number of other functionalities. For example, images can be displayed next to each TreeNode. Also, event handlers can created so that they execute when the user clicks a TreeNode. For more information on these features, be sure to read the Internet Explorer Web Controls Reference page. Also, if you have questions on the TreeView or other IE Web Controls, consider asking them at the IE Web Controls Forum at the ASP.NET Forums.

Happy Programming!