problem in treeview using xml,xslt.

jyoti_khera · October 18th, 2004, 07:14 AM

we are trying to build treeview using xml,xslt.
Indentation of tree nodes are not coming properly.
All the nodes in the tree are coming in the same vertical align.

mhkay · October 18th, 2004, 07:44 AM

If you want help debugging your code, you will need to post it.

Michael Kay
http://www.saxonica.com/

barcher · October 18th, 2004, 08:26 AM

What expression are you using to determine the level of indentation?

jyoti_khera · October 18th, 2004, 11:29 PM

i m adding spaces using for loop after each and every Branch ..for each leaf.
But that is not the appropriate way..i mean number of levels can change

Please see the xsl and xml code below..

xmlTree.xsl
<?xml version="1.0" ?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html"></xsl:output>

<xsl:template match="/">
<html>
<head>
<title>XLM Tree Control</title>
<link href="xmlTree.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="xmlTree.js"></script>
</head>
<xsl:apply-templates/>
</html>
</xsl:template>

<xsl:template match="tree">
<body>
<xsl:apply-templates/>
</body>
</xsl:template>

<xsl:template match="branchLevel1">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="branchLevel2">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;</xsl:text>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>

<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;</xsl:text>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="branchLevel3">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;</xsl:text>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>

<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;</xsl:text>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="branchLevel4">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;</xsl:text>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;</xsl:text>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="branchLevel5">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</xsl:text>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>

<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</xsl:text>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="branchLevel6">

<xsl:attribute name="onClick">
showBranch
('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;</xsl:text>

<img src="images/collapse.gif">
<xsl:attribute name="id">I<xsl:value-of select="@id"/>
</xsl:attribute>
</img>

<xsl:value-of select="branchText"/>

<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;</xsl:text>

 



<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:apply-templates/>

</xsl:template>

<xsl:template match="leaf">

<img src="images/doc.gif"/>

<a>
<xsl:attribute name="href">
<xsl:value-of select="link"/>

</xsl:attribute>

<xsl:value-of select="leafText"/>
</a>

 

</xsl:template>

<xsl:template match="leaf">
<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;</xsl:text>

<img src="images/doc.gif"/>

<a>
<xsl:attribute name="href">
<xsl:value-of select="link"/>

</xsl:attribute>

<xsl:value-of select="leafText"/>
</a>

<xsl:text disable-output-escaping="yes">&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;</xsl:text>

 

</xsl:template>
<xsl:template match="branchText"/>

</xsl:stylesheet>

xmltree.xml
<?xml version="1.0" ?>

<!DOCTYPE tree SYSTEM 'tree.dtd'>

<?xml-stylesheet type="text/xsl" href="xmlTree.xsl"?>

<tree>
<branchLevel1 id="html">
 <branchText>HTML</branchText>
 <leaf>
 <leafText>Tags,Tags,Tags</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Hyperlink</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Images</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Tables</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Form</leafText>
 <link>#</link>
 </leaf>
 </branchLevel1>

 <branchLevel1 id="css">
 <branchText>CSS</branchText>
 <leaf>
 <leafText>InlineStyle</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti</leafText>
 <link>#</link>
 </leaf>

 <branchLevel2 id="css2">
 <branchText>CSS2</branchText>
 <leaf>
 <leafText>InlineStyle2</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet2</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text2</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text2</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti2</leafText>
 <link>#</link>
 </leaf>

 <branchLevel3 id="css3">
 <branchText>CSS3</branchText>
 <leaf>
 <leafText>InlineStyle3</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet3</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text3</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text3</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti3</leafText>
 <link>#</link>
 </leaf>
 <branchLevel4 id="css4">
 <branchText>CSS4</branchText>
 <leaf>
 <leafText>InlineStyle4</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet4</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text4</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text4</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti4</leafText>
 <link>#</link>
 </leaf>
 <branchLevel5 id="css5">
 <branchText>CSS5</branchText>
 <leaf>
 <leafText>InlineStyle5</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet5</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text5</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text5</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti5</leafText>
 <link>#</link>
 </leaf>
 <branchLevel6 id="css6">
 <branchText>CSS6</branchText>
 <leaf>
 <leafText>InlineStyle6</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>External Style Sheet6</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>Formatting Text6</leafText>
 <link>#</link>
 </leaf>
 <leaf>
 <leafText>positioning Text6</leafText>
 <link>#</link>
</leaf>
 <leaf>
 <leafText>Jyoti6</leafText>
 <link>#</link>
 </leaf>
 </branchLevel6>
 </branchLevel5>
 </branchLevel4>
 </branchLevel3>
 </branchLevel2>
 </branchLevel1>

 </tree>