Oct 06 2006

Grouping control part 2 - toggle tablerows with JavaScript

Posted by admin under Controls

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:



  <script type="text/javascript">

function poorman_toggle(id)
{
	var tr = document.getElementById(id);
	if (tr==null) { return; }
	var bExpand = tr.style.display == '';
	tr.style.display = (bExpand ? 'none' : '');
}
</script>

and the HTML looks like this:



    <a href="javascript:poorman_toggle('row1');">toggle</a>
    <br />
    <table border="1">
    <tr id="row1">
	<td>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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.

READ PART 3