asked on

Collapse/Expand ALL rows in a tree (xsl)

I have these rows expanding and collapsing, but I need a way to expand or collapse ALL rows at the same time.

It seems like this should be fairly simple, but my javascript language skills are very limited.

Please be as specific to my example as possible.

xml file:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="Tree.xsl"?>
<root>
<summaryElementsPerformance>
<displayCategory>Performance</displayCategory>
<reportElementID>32</reportElementID>
<elementName>Applied</elementName>
<elementDescription>Date applied for services.</elementDescription>
<carryIn>0</carryIn>
<m1>3</m1>
<m2>3</m2>
<m3>3</m3>
<m4>4</m4>
<m5>7</m5>
<m6>8</m6>
<m7>9</m7>
<m8>10</m8>
<m9>14</m9>
<m10>17</m10>
<m11>19</m11>
<m12>19</m12>
<q1>3</q1>
<q2>8</q2>
<q3>14</q3>
<q4>19</q4>
<ytd>19</ytd>
<planCarryIn>0</planCarryIn>
<planm1>0</planm1>
<planm2>0</planm2>
<planm3>0</planm3>
<planm4>0</planm4>
<planm5>0</planm5>
<planm6>0</planm6>
<planm7>0</planm7>
<planm8>0</planm8>
<planm9>0</planm9>
<planm10>0</planm10>
<planm11>0</planm11>
<planm12>0</planm12>
<planq1>0</planq1>
<planq2>0</planq2>
<planq3>0</planq3>
<planq4>0</planq4>
<planYTD>0</planYTD>
</summaryElementsPerformance>
<summaryElementsPerformance>
<displayCategory>Performance</displayCategory>
<reportElementID>34</reportElementID>
<elementName>Registered</elementName>
<elementDescription>Clients that have been determined eligible for services.</elementDescription>
<carryIn>0</carryIn>
<m1>2</m1>
<m2>2</m2>
<m3>2</m3>
<m4>3</m4>
<m5>3</m5>
<m6>5</m6>
<m7>6</m7>
<m8>7</m8>
<m9>11</m9>
<m10>14</m10>
<m11>16</m11>
<m12>16</m12>
<q1>2</q1>
<q2>5</q2>
<q3>11</q3>
<q4>16</q4>
<ytd>16</ytd>
<planCarryIn>0</planCarryIn>
<planm1>0</planm1>
<planm2>0</planm2>
<planm3>0</planm3>
<planm4>0</planm4>
<planm5>0</planm5>
<planm6>0</planm6>
<planm7>0</planm7>
<planm8>0</planm8>
<planm9>0</planm9>
<planm10>0</planm10>
<planm11>0</planm11>
<planm12>0</planm12>
<planq1>0</planq1>
<planq2>0</planq2>
<planq3>0</planq3>
<planq4>0</planq4>
<planYTD>0</planYTD>
</summaryElementsPerformance>
<summaryElementsPerformance>
<displayCategory>Performance</displayCategory>
<reportElementID>35</reportElementID>
<elementName>Enrolled</elementName>
<elementDescription>Date that participant was enrolled to the site.</elementDescription>
<carryIn>0</carryIn>
<m1>2</m1>
<m2>2</m2>
<m3>2</m3>
<m4>3</m4>
<m5>3</m5>
<m6>5</m6>
<m7>6</m7>
<m8>7</m8>
<m9>11</m9>
<m10>14</m10>
<m11>16</m11>
<m12>16</m12>
<q1>2</q1>
<q2>5</q2>
<q3>11</q3>
<q4>16</q4>
<ytd>16</ytd>
<planCarryIn>0</planCarryIn>
<planm1>0</planm1>
<planm2>0</planm2>
<planm3>4</planm3>
<planm4>4</planm4>
<planm5>4</planm5>
<planm6>8</planm6>
<planm7>8</planm7>
<planm8>8</planm8>
<planm9>12</planm9>
<planm10>12</planm10>
<planm11>12</planm11>
<planm12>16</planm12>
<planq1>4</planq1>
<planq2>8</planq2>
<planq3>12</planq3>
<planq4>16</planq4>
<planYTD>16</planYTD>
</summaryElementsPerformance>
<summaryElementsPerformance>
<displayCategory>Performance</displayCategory>
<reportElementID>36</reportElementID>
<elementName>Started Activities</elementName>
<elementDescription>Clients that have started services beyond self service (registered, intensive or training)</elementDescription>
<carryIn>0</carryIn>
<m1>2</m1>
<m2>2</m2>
<m3>2</m3>
<m4>3</m4>
<m5>3</m5>
<m6>5</m6>
<m7>6</m7>
<m8>7</m8>
<m9>11</m9>
<m10>14</m10>
<m11>16</m11>
<m12>16</m12>
<q1>2</q1>
<q2>5</q2>
<q3>11</q3>
<q4>16</q4>
<ytd>16</ytd>
<planCarryIn>0</planCarryIn>
<planm1>0</planm1>
<planm2>0</planm2>
<planm3>0</planm3>
<planm4>0</planm4>
<planm5>0</planm5>
<planm6>0</planm6>
<planm7>0</planm7>
<planm8>0</planm8>
<planm9>0</planm9>
<planm10>0</planm10>
<planm11>0</planm11>
<planm12>0</planm12>
<planq1>0</planq1>
<planq2>0</planq2>
<planq3>0</planq3>
<planq4>0</planq4>
<planYTD>0</planYTD>
</summaryElementsPerformance>
</root>

xsl file:
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>

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

<head>
Tree View Problem
<br/><br/>
</head>
<title>Performance Report</title>

<body class="performanceBody">

<SCRIPT TYPE="text/javascript" language="javascript">
<xsl:comment>
<![CDATA[
function toggleDisplay(s)
{
oRow = document.getElementById(s);
oRow1 = document.getElementById(s + "-line1");
oRow2 = document.getElementById(s + "-line2");
if (oRow1.style.display == "none")
{
oRow1.style.display = "";
oRow2.style.display = "";
oRow.innerHTML = "<b>-</b>"
}
else
{
oRow1.style.display = "none";
oRow2.style.display = "none";
oRow.innerHTML = "<b>+</b>"
}
}

]]>
//</xsl:comment>
</SCRIPT>

<script language="javascript" src="/scripts/headerFooter.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="itracTable" >
<tr>
<xsl:apply-templates select="root/summaryElementsPerformance"

mode="reportElementID"/>
</tr>

</table>
</body>

</html>
</xsl:template>



<xsl:template match="summaryElementsPerformance" mode="reportElementID">

<tr>
<td class="performanceRowHeading" width="135" colspan="1">
<a style="cursor:hand" class="itracLink" onclick="toggleDisplay('{generate-id()}')">
<span id="{generate-id()}"><b>-</b></span> <xsl:value-of select = "./elementName"/>
</a>
</td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./carryIn" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./q1" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./q2" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./q3" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./q4" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="35" colspan="1">
<xsl:value-of select="./ytd" />
</td>
<td class="performanceDataLast" width="45" colspan="1"></td>

</tr>
<tr id="{generate-id()}-line1">
<td class="performanceRowHeading" width="135" colspan="1">
   Planned
</td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./planCarryIn" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./planq1" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./planq2" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./planq3" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
<xsl:value-of select="./planq4" />
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="35" colspan="1">
<xsl:value-of select="./planYTD" />
</td>
<td class="performanceDataLast" width="45" colspan="1"></td>
</tr>
<tr id="{generate-id()}-line2">
<td class="performanceRowHeading" width="135" colspan="1">
   Planned Line 2
</td>

<td class="performanceDataBoldBorder" width="40" colspan="1">
5
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
10
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
15
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
20
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="40" colspan="1">
25
</td>
<td class="performanceDataBorder" width="40" colspan="1"></td>
<td class="performanceDataSpacer" width="7" colspan="1"></td>
<td class="performanceDataBoldBorder" width="35" colspan="1">
30
</td>
<td class="performanceDataLast" width="45" colspan="1"></td>
</tr>

</xsl:template>
</xsl:stylesheet>

Thank you!

Zontar

How about

var myTable = document.getElementsByTagName("table")[0];
var rows = myTable.getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++)
{
if(rows[i].style.display == "block")
rows[i].style.display = "none";
else
rows[i].style.display = "block";
}

IIRC, MSIE likes "block" for table rows whereas Mozilla/Netscape and Opera prefer "table-row" (which is the W3C way to do it).

I think you could lighten the output a lot by using element selectors rather than the vary long class names.

And you definitely do not need all those instances of *colspan="1"*; those don't do a thing except take up space.

Also you could get rid of all the onclick handlers using global event handling.

It would help to see a sample of the actual HTML output.

snvanvl

ASKER

I haven't been able to get that to work. It does go into the right section (block or none) but the rows don't acually expande and collapse.

You can save the code I have above into an xml & xsl files then view the xml file in IE to see how it operates.

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

snvanvl

ASKER

Those changes within the function made it work perfectly.
Thank you!

Zontar

No worries.

Actually I've seen a couple of small improvements that could be made. I'll try to post those tomorrow if you've not run across them yourself.

cheers

jon.

snvanvl

ASKER

Now I'm stuck on trying to get the "-" & "+" to switch when I choose expand/collapse all.

snvanvl

ASKER

Nevermind, I got the "-" & "+" working.