expand and collapse

Post by **tjsingh** » Fri Mar 27, 2009 7:33 pm

Hi

I am trying to do an expand and collapse. I have created the xml which i have pasted below. What i am trying to achieve is having the hierarchy which expands but the last node will show a table. I can get it to display but the problem is that it picks the attributes of the parent node which i dont want it to. i have created javascript,xml and xsl. This can be copy and pasted so you can see whats happening. Record is the element which represents the table in xml

thanks

XML FILE

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type='text/xsl' href='file:report.xsl'?>
<report count="8" date="16/03/2009" time="11:51:53" title="XML template"
user="Android "¬Stuart" Fergluson">

<data>
<groupheader id="e1" title="Department Family" >
<groupheader id = "e2" title="WorkType Divorce">
<groupheader id="e3" title = "fee earner tej">

<groupheader id="e4">
<record id="e99" >
<matter_chargeable>YES</matter_chargeable>
<matter_status>0</matter_status>
<disbursement_amount>40.00</disbursement_amount>
<disbursement_billed_amount>0.00</disbursement_billed_amount>
<disbursement_date>2008-11-20</disbursement_date>
<disbursement_status>0</disbursement_status>
<disbursement_text>Invoice</disbursement_text>
<disbursement_unbilled_amount>40.00</disbursement_unbilled_amount>
</record>
<record id="e98">
<matter_chargeable>YES</matter_chargeable>
<matter_status>0</matter_status>
<disbursement_amount>40.00</disbursement_amount>
<disbursement_billed_amount>0.00</disbursement_billed_amount>
<disbursement_date>2008-11-20</disbursement_date>
<disbursement_status>0</disbursement_status>
<disbursement_text>Invoice</disbursement_text>
<disbursement_unbilled_amount>40.00</disbursement_unbilled_amount>
</record>
<subtotal>
<matter_chargeable/>
<matter_status/>
<disbursement_amount>140.00</disbursement_amount>
<disbursement_billed_amount>0.00</disbursement_billed_amount>
<disbursement_date/>
<disbursement_status/>
<disbursement_text/>
<disbursement_unbilled_amount>40.00</disbursement_unbilled_amount>
</subtotal>
</groupheader>
</groupheader>
</groupheader>
</groupheader>

</data>
</report>

XSL file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:template match="/">
<html>
<head>
<title><xsl:text>IRIS Law - </xsl:text><xsl:value-of select="report/@title"/></title>
<style>
thead.repeatHeaders {display: table-header-group;}
a.sortLink { color: white; text-decoration: none; }
a.filterLink { font-weight: normal; color: #0000ff; text-decoration: underline;}
a.filterLinkPlusMinus { font-weight: normal; color: black; text-decoration: none;}
.reportTitle { font-size: 100%; font-family: Tahoma; font-weight: bold; border-bottom: 15px solid white; color: #0F2B5B;}
.mainTable { font-family: Tahoma; font-size: 70%; }
.filterList { border-bottom: 15px solid white; font-family: Tahoma; font-size: 70%; }
.filterTitle { font-family: Tahoma; font-weight: bold; text-align: left; color: #0F2B5B;}
.filtersHeading { font-family: Tahoma; font-weight: bold; text-align: left; color: #0F2B5B;}
.dataCharacter { font-family: Tahoma; }
.dataNumeric { font-family: Lucida Console; }
.rowOdd { background-color: white; }
.rowEven { background-color: #EDEFF3; }
.columnLabel { background-color: #0F2B5B; font-family: Tahoma; font-weight: bold; font-size: 114%; color: white; border: 0px solid #D6DCE0; }
.reportFooter { font-family: Tahoma; font-size: 70%; border-top: 12px solid white; }
.dataCell { font-family: Tahoma; vertical-align: top; border-right: 1px solid #D6DCE0; }
.dataCellLeft { font-family: Tahoma; vertical-align: top; border-left: 1px solid #D6DCE0; border-right: 1px solid #D6DCE0; }
.dataCellBottom { font-family: Tahoma; vertical-align: top; border-right: 1px solid #D6DCE0; border-bottom: 1px solid #D6DCE0; }
.dataCellLeftBottom { font-family: Tahoma; vertical-align: top; border-left: 1px solid #D6DCE0; border-right: 1px solid #D6DCE0; border-bottom: 1px solid #D6DCE0; }
.subTotal { background-color: yellow; }
.titleHeader { font-family: Tahoma; background-color:#0F2B5B; font-weight: bold; width:0; white-space: nowrap; padding:5px;}
</style>

<script language="JScript"><![CDATA[
// Declare the global variables
var XSLSource = new Object();
var XMLSource = new Object();

// Get the XML and XSL documents
XMLSource = document.XMLDocument;
XSLSource = document.XSLDocument;

function sortit(sortfield, datatype) {

// Declare the variables
var XSLSort = new Object();

// Find the sort xsl:sort
XSLSort = XSLSource.documentElement.selectNodes("//xsl:sort");

// Determine the sort order
if(XSLSort[0].attributes(0).text == sortfield.toString()){
if(XSLSort[0].attributes(1).text == "ascending") {
XSLSort[0].attributes(1).text = "descending";
} else {
XSLSort[0].attributes(1).text = "ascending";
}
} else {
XSLSort[0].attributes(1).text = "ascending";
}

// Set the sort field
XSLSort[0].attributes(0).text = sortfield.toString();

// Set the sort Datatype
switch(datatype.toString()) {
case "date":
XSLSort[0].attributes(2).text = "date";
break;
case "decimal":
case "integer":
XSLSort[0].attributes(2).text = "number";
break;
case "character":
default:
XSLSort[0].attributes(2).text = "text";
break;
}

// Render the page
document.body.innerHTML = XMLSource.transformNode(XSLSource);
}
]]></script>

<script language="JavaScript"><![CDATA[
function initialize() {
var xmlDoc
var xslDoc

xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
xmlDoc.async = false;

xslDoc = new ActiveXObject('Microsoft.XMLDOM')
xslDoc.async = false;

xmlDoc.load("tree/tree.xml")
xslDoc.load("tree/tree.xsl")

folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
}

function clickOnEntity(entity) {
alert(entity.open)
if(entity.open == "false") {
expand(entity, true)
}
else {
collapse(entity)
}
window.event.cancelBubble = true
}

function expand(entity) {
//var oImage

//oImage = entity.childNodes(0).all["image"]
//oImage.src = entity.imageOpen

for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
entity.childNodes(i).style.display = "block"
}
}
entity.open = "true"
}

function collapse(entity) {
//var oImage
var i

//oImage = entity.childNodes(0).all["image"]
//oImage.src = entity.image

// collapse and hide children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
collapse(entity.childNodes(i))
}
}
entity.open = "false"
}

function expandAll(entity) {
var oImage
var i

expand(entity, false)

// expand children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
expandAll(entity.childNodes(i))
}
}
}

]]>
</script>

<script language="javascript">
function toggleObjectDisplayed (objectId)
{
if (document.getElementById (objectId).style.display == "none")
document.getElementById (objectId).style.display = "";
else
document.getElementById (objectId).style.display = "none";
}

function togglePlusMinus ()
{
if (document.getElementById ('filterLink').innerHTML == "+")
// Output a proper minus symbol rather than a hyphen
document.getElementById ('filterLink').innerHTML = eval ('"\\u2212"');
else
document.getElementById ('filterLink').innerHTML = "+";
}
</script>

</head>
<body ONLOAD="initialize()" ONSELECTSTART="return false" TOPMARGIN="15" LEFTMARGIN="15">

<div class="reportTitle"><xsl:value-of select="report/@title"/></div>


<table class="filterlist" border="0" cellspacing="2" cellpadding="0">
<tbody>
<tr>
<td><b>Date:</b></td>
<td><xsl:value-of select="report/@date"/><xsl:text> </xsl:text><xsl:value-of select="report/@time"/></td>
</tr>
<tr>
<td><b>User:</b></td>
<td><xsl:value-of select="report/@user"/></td>
</tr>
</tbody>
</table>

<xsl:apply-templates select="report/data/groupheader"/>
<table border="0" cellspacing="0" cellpadding="5">
<xsl:for-each select="groupheader/record">
<tr>
<td><xsl:value-of select="."/></td>
</tr>
</xsl:for-each>
</table>


<div class="reportFooter">
<xsl:value-of select="report/@count"/><xsl:text> items</xsl:text>
</div>
</body>
</html>
</xsl:template>

<xsl:template match="groupheader">
<xsl:if test="@title">
<div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">

<xsl:attribute name="open">true</xsl:attribute>
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="open">true</xsl:attribute>
<xsl:attribute name="STYLE">
padding-left: 20px;
cursor: hand;
</xsl:attribute>

<table id="filterTable" class="filterList" border="0" cellspacing="0" cellpadding="0">
<tr>

<td><a id="filterLink" href="#" class="filterLinkPlusMinus">+</a></td>

<td valign="middle" nowrap="true">
<xsl:attribute name="STYLE">
padding-left: 7px;
font-family: Verdana;
font-size: 11px;
font-color: black;
</xsl:attribute>
<xsl:value-of select="@title"/>

</td>
</tr>

</table>

<table border="0" cellspacing="0" cellpadding="5">
<xsl:for-each select="record">
<tr>
<td><xsl:value-of select="."/></td>
</tr>
</xsl:for-each>
</table>



<xsl:apply-templates select="groupheader" />

</div>
</xsl:if>

</xsl:template>

<xsl:template match="record">
<table border="0" cellspacing="0" cellpadding="5">
<xsl:for-each select="record">
<tr>
<td><xsl:value-of select="."/></td>
</tr>
</xsl:for-each>
</table>

</xsl:template>

<xsl:template name="cellValue">
<xsl:choose>
<xsl:when test=".!=''">
<xsl:choose>
<xsl:when test="/report/header/field[@NAME=name(current())]/@DATA-TYPE='character'">
<xsl:call-template name="break" />
</xsl:when>
<xsl:when test="/report/header/field[@NAME=name(current())]/@DATA-TYPE='date'">
<xsl:value-of select="concat(substring(.,9,2), '/', substring(.,6,2), '/', substring(.,1,4))" />
</xsl:when>
<xsl:when test="/report/header/field[@NAME=name(current())]/@DATA-TYPE='decimal'">
<xsl:value-of select="format-number(., '###,###,##0.00')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:text disable-output-escaping="yes"> </xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template name="break">
<xsl:param name="text" select="."/>
<xsl:choose>
<xsl:when test="contains($text, '
')">
<xsl:value-of select="substring-before($text, '
')"/>
<br/>
<xsl:call-template name="break">
<xsl:with-param name="text" select="substring-after($text,'
')"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$text"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Post by **sorin_ristache** » Thu Apr 02, 2009 10:05 am

Hello,

I think you should ask about this on a special forum about XSLT stylesheets development where you can find some XSLT experts.

Regards,
Sorin

expand and collapse

expand and collapse

Re: expand and collapse