Grouping control part 2 – toggle tablerows with JavaScript
This is part 2 of this tutorial on how to create a expandable/collapsible grouping repeater control with ASP.NET. So, please start by reading part 1.
Showing or hiding a tr row in a table should be done clientside - and therefore it involves some JavaScript.
Click toggle hides it
And click again of course shows is again.
This works by this little Javascript:
EEEContent_Code(javascript)
[/code]
and the HTML looks like this:
<a href="javascript:poorman_toggle('row1');">toggle</a>
<br />
<table border="1">
<tr id="row1">
<td> AROUT</td>
<td class="number">10743</td>
<td class="number">1997-11-17 00:00:00</td>
<td class="number">1997-12-15 00:00:00</td>
</tr>
<tr id="row2">
<td> AROUT</td>
<td class="number">10768</td>
<td class="number">1997-12-08 00:00:00</td>
<td class="number">1998-01-05 00:00:00</td>
</tr>
<tr id="row3">
<td> AROUT</td>
<td class="number">10793</td>
<td class="number">1997-12-24 00:00:00</td>
<td class="number">1998-01-21 00:00:00</td>
</tr>
</table>
So basically - by giving each row a unique id we can just change the display to the opposite of what it was before - is it '' set it to none and vice versa.
So - in short we need to provide such a "toggle" link in each hroup header row - we will look at that soon, now first lets look at swapping images by using Javascript.