Oct 06 2006

Javascript - hide/show multiple table rows

Posted by admin under Controls

This is part 4 of this tutorial on how to create a expandable/collapsible grouping repeater control with ASP.NET. So, please start by reading part 1. 

So far we have created a htmltable and added javascript collapse/expand support - and also we can swap the minus image to plus and vice versa.

So is it so we now do know all we need to know Javascriptwise? Well it looks like it, but there is one more thing to fix. Multiple rows. We can now just hide/show one single row. We need to be able to add some sort of connection between our groupheader rows and it's client rows.

I though about this for soooo long - trying to do some smart id naming scheme so the when clicking on a header row it's client rows could be easily found out. However sometimes the easiest way out is good enough. Consider this:

To make the easiest possible solution for this we just hard code the rows to hide/show:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title>
    
  <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' : '');
}
function poorman_changeimage(id, sMinus, sPlus)
{
	var img = document.getElementById(id);
	if (img!=null)
	{
	    var bExpand = img.src.indexOf(sPlus) >= 0;
		if (!bExpand)
			img.src = sPlus;
		else
			img.src = sMinus;
	}
}

function Toggle_trGrpHeader2()
{
    poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
    poorman_toggle('row1');
    poorman_toggle('row2');
    poorman_toggle('row3');
}

function Toggle_trGrpHeader1()
{
    poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
    poorman_toggle('trRow1');
}
</script>
    
</head>
<body>

    <div>
    <table border="1">
    <tr id="trGrpHeader1">
	<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td>
</tr>
    
    <tr id="trRow1">
	<td>&nbsp;&nbsp;Hello</td>
	<td class="number">10</td>
	<td class="number">1999-11-17 00:00:00</td>
	<td class="number">1999-12-15 00:00:00</td>
</tr>
    
    <tr id="trGrpHeader2">
	<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td>
</tr>
    
    <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>
    </div>
</body>
</html>

Now - hardcoding like this might not be a very cool solution - but lets take one step back and think what we are trying to do: We are actually creating a ASP.NET solution. Yes, the Javascript will look pretty hardcoded in the html browser - but who cares - we don't have to write a single line, we can have our control generate those Javascript calls.

READ PART 5