Oct 06 2006

Grouping part 3 - swapping image by Javascript

Posted by admin under Controls

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

Now we need to swap an image as well. Lets look at how the example looks:

And when clicking we hide the first row (with id row1)

and also swap the image. Lets look at the code:



<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;
	}
}
</script>
    
</head>
<body>

    <div>
    <a href="javascript:poorman_toggle('row1');">toggle</a>
    <table border="1">
    <tr id="trheader">
	<td colspan="4"><span onclick="javascript:poorman_toggle('row1');poorman_changeimage('toggleimg', 'images/minus.gif', 'images/plus.gif');"><img src="images/minus.gif" id="toggleimg"/>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>

The swapping is made in poorman_changeimage() by looking at the existing image - if it contains (indexOf) the sPlus variable (which is set to 'images/plus.gif') then we change image to what specified by the sMinus variable.

Now, we have all JavaScript knowledge we need to continue creating our grouping control creation. 

READ PART 4