Introduction
Transform xml data with xslt to xhtml treeview.
sampletree.xml
<code>
<?xml version="1.0" encoding="UTF-8"?>
<treeview title="Sample tree">
<custom-parameters>
<param name="shift-width" value="15"/>
<param name="img-directory" value="images/"/>
</custom-parameters>
<folder title="Desktop" img="Desktop.gif">
<folder title="My documents" img="MyDocuments.gif">
<folder title="My music" img="folder.gif">
<leaf title="siteclx" url="1" img="page.gif"/>
<leaf title="design" url="2" img="page.gif"/>
<leaf title="devellopment" url="3" img="page.gif"/>
</folder>
<folder title="My images" img="MyImages.gif">
<leaf title="php" url="4" img="red_ball.gif"/>
<leaf title="perl" url="5" img="red_ball.gif"/>
</folder>
</folder>
<folder title="My computer" img="computer.gif">
<folder title="Floppy (A:)" url="1" img="floppy.gif"/>
<folder title="Hard drive (C:)" url="1" img="harddrive.gif">
<leaf title="Perl" url="7" img="page.gif"/>
<leaf title="Java" url="8" img="page.gif"/>
<leaf title="PHP" url="8" img="page.gif"/>
<leaf title="dotNet" url="8" img="page.gif"/>
</folder>
<leaf title="Configuration Pannel" url="9" img="config.gif"/>
<leaf title="Shared documents" url="10" img="folder.gif"/>
</folder>
<folder title="Network" img="network.gif"/>
<folder title="Trash" img="trash.gif"/>
</folder>
</treeview>
treeview.xslt
<code>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:asp="remove">
<xsl:output method="xml" indent="yes" encoding="utf-8" omit-xml-declaration="yes"/>
<xsl:variable name="shift-width" select="/treeview/custom-parameters/param[@name='shift-width']/@value"/>
<xsl:variable name="img-directory" select="/treeview/custom-parameters/param[@name='img-directory']/@value"/>
<xsl:template match="/treeview">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
<xsl:apply-templates select="folder">
<xsl:with-param name="depth" select="1"/>
</xsl:apply-templates>
</td></tr>
</table>
</xsl:template>
<xsl:template match="folder">
<xsl:param name="depth"/>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<xsl:if test="$depth>1">
<td width="{$shift-width}"></td>
</xsl:if>
<td valign="top">
<a onclick="toggle(this)" class="folder">
<img src="{$img-directory}plus.gif"/>
<img src="{$img-directory}{@img}"/><xsl:value-of select="@title"/></a>
<div>
<xsl:attribute name="style">display:none;</xsl:attribute>
<xsl:apply-templates select="folder">
<xsl:with-param name="depth" select="$depth+1"/>
</xsl:apply-templates>
<xsl:apply-templates select="leaf"/>
</div>
</td>
</tr>
</table>
</xsl:template>
<xsl:template match="leaf">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="{$shift-width}"></td>
<td valign="top">
<a class="leaf"><xsl:attribute name="onclick">selectLeaf('<xsl:value-of select="@title"/>','<xsl:value-of select="@url"/>')</xsl:attribute>
<img src="{$img-directory}{@img}"/>
<xsl:value-of select="@title"/>
</a>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
transform.aspx
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ import Namespace="System.Xml.XPath" %>
<%@ import Namespace="System.Xml.Xsl" %>
<%@ import Namespace="System.IO" %>
<script language="C#" runat="server" Debug="true">
void Page_Load(Object sender, EventArgs e) {
XPathDocument treeDoc = new XPathDocument(Server.MapPath("sample.xml"));
XslTransform treeView = new XslTransform();
treeView.Load(Server.MapPath("treeview.xslt"));
StringWriter sw = new StringWriter();
treeView.Transform(treeDoc, null, sw);
string result = sw.ToString();
result = result.Replace("xmlns:asp=\"remove\"", "");
Control ctrl = Page.ParseControl(result);
myTree.Controls.Add(ctrl);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SiteCLX title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="author" content="P.A. Huisman" />
<meta name="owner" content="SiteCLX" />
<meta name="copyright" content="copyright 2002-2003 SiteCLX. http://www.siteclx.com" />
<meta name="keyphrases" content="xhtml treeview sample" />
<meta name="resource-type" content="document" />
<meta name="rating" content="general" />
<meta name="keywords" content="xhtml, treeview" />
<meta name="description" content="xhtml treeview sample" />
<meta name="abstract" content="xhtml treeview sample" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="30 days" />
<style type="text/css" media="screen">
.folder,
.folder:hover,
.leaf:hover,
.leaf {
font-family : verdana;
padding:0px;
cursor: hand;
font-size : 8pt;
color: #000000;
text-decoration:none;
}
.folder:hover,
.leaf:hover {text-decoration:undeline; cursor: hand;}
</style>
<script type="text/javascript" language="javascript">
function toggle(node) {
var nextDIV = node.nextSibling;
while(nextDIV.nodeName != "DIV") {
nextDIV = nextDIV.nextSibling;
}
if (nextDIV.style.display == 'none') {
if (node.childNodes.length > 0) {
if (node.childNodes.item(0).nodeName == "IMG") {
node.childNodes.item(0).src = getImgDirectory(node.childNodes.item(0).src) + "minus.gif";
}
}
nextDIV.style.display = 'block';
}
else {
if (node.childNodes.length > 0) {
if (node.childNodes.item(0).nodeName == "IMG") {
node.childNodes.item(0).src = getImgDirectory(node.childNodes.item(0).src) + "plus.gif";
}
}
nextDIV.style.display = 'none';
}
}
function getImgDirectory(source) {
return source.substring(0, source.lastIndexOf('/') + 1);
}
function selectLeaf(title, url) {
alert("You just clicked on title = " + title + ":: url = " + url);
}
</script>
</head>
<body>
<asp:label id ="myTree" runat="server" />
</body>
</html>
