How to expand/collaps rows?

JavaScript
1

In my application I present a lot of data in tables. I have a problem that different users want to see different data, and an ever growing number of features in what to do on each row. Its time to make an “super table”.

I want to present a table, where the row present a few preselected columns.
Then, when the user click on the row, it expands and an custom layout containing data/features appear.

I have provided with a demo below how I think this might be done.

I would like to realize this with an well known JavaScript UI/Ajax library like Dojo/JQuery. Hopefully with Dojo since we already got some Dojo stuff.

I have looked at demos at Dojo/Jquery without finding anything that I find suitable. I also went through the test files in Dojo, but I couldn’t see how this could be done with existing grid functionality.

What should I look for?

I’m not looking for subgrids, since the content can be all kind of stuff (images, lists, buttons, links and tables).
I’m kinda looking for treegrid, but where I can dictate look and feel of the sub elements.
I’m kinda looking for accordion, but in table form, and where rows does not close if other opens, and where several rows can be open at same time.

One Problem: This custom made layout to be shown in the expanding row, will be a tabular layout. I want the layout to look the same in every expanding row.
I always find controlling column width a problem in tabular layout when you have 2 or more independent tables. Or if you can control the layout, then it is very tedious to maintain the layout as you add/remove elements in the layout.
I was hoping that using a js UI library like Dojo would help me with this in an easier way. Because I think people have done this before, and I think it would require a lot of work doing this all by my self.

This is just a demo. I checked it in IE8/FF3.6. Click on a row to make it expand/collapse.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta CONTENT="no-cache" HTTP-EQUIV="Pragma"/>
<meta CONTENT="-1" HTTP-EQUIV="Expires"/>

<title>Tabell</title>
<link media="screen" href="vigo.css" type="text/css" rel="stylesheet"/>



<style type="text/css" media="screen">
.hidden
{
	display: none;
}
</style>

<script type="text/javascript">

function addTxt( str )
{
	document.getElementById('my_div').innerHTML += '<br />' + str;
}

function hasCssClass( element, name) 
{
    return element.className.match( new RegExp( '(\\\\s|^)' + name + '(\\\\s|$)' ));
}
 
function addCssClass( element, name) 
{
    if( !this.hasCssClass( element, name )) element.className += " " + name;
}
 
function removeCssClass( element, name ) 
{
    if( hasCssClass( element, name ))
    {
        var regEx = new RegExp('(\\\\s|^)' + name + '(\\\\s|$)' );
        element.className = element.className.replace( regEx, ' ' );
    }
}

function hide( element )
{
	if( element )
	{
		addCssClass( element, 'hidden' );
	}    
}

function show( element ) 
{
	if( element )
	{
		removeCssClass( element, 'hidden' );
	}    
}

function run()
{	
	var table = document.getElementById( 'mytable' );
	if( table )
	{		
		var tbody = table.getElementsByTagName( 'TBODY' );				
		var tr = tbody[0].getElementsByTagName( 'TR' );
		
		for( i = 0; i < tr.length; i++ )
		{
			if( tr[i].getAttribute( 'type' ) == 'special' )
			{				
				hide( tr[i] );
			}
			else
			{
				tr[i].onclick = toggle;
			}
			//addTxt( tr[i].tagName + tr[i].getAttribute( 'type' ) );
		}
	}	
}

function toggle()
{	    
	var selected = this.nextSibling;
	while( selected.tagName != 'TR' )
		selected = selected.nextSibling;
	
	if( selected && selected.getAttribute( 'type' ) == 'special')
	{
		if( hasCssClass( selected, 'hidden' ))    
		{       
			show(selected);        
		} 
		else 
		{      
			hide(selected);        
		}
	}
}
window.onload=run;
</script>
</head>

<body>

<table id="mytable">
<tr>
	<th>ID</th><th>Name</th><th>Adress</th><th>Zip</th><th>City</th>
</tr>
<tr>
	<td>1</td><td>Bill</td><td>mm</td><td>123</td><td>mm</td>
</tr>
<tr type="special">
	<td colspan="5">
		<table>
			<tr>
				<td>Some info</td><td>more info</td><td>stuff</td>
			</tr>
			<tr>
				<td>
					<select name="stuffs">
					<option value="1">hmm</option>
					<option value="2">mm</option>				
					</select>				
				</td><td>wow:</td><td><input type="button" value="Save"></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td>2</td><td>Joe</td><td>mm</td><td>324</td><td>mm</td>
</tr>
<tr type="special">
	<td colspan="5">special row</td>
</tr>
<tr>
	<td>3</td><td>Barney</td><td>mm</td><td>435</td><td>mm</td>
</tr>
<tr type="special">
	<td colspan="5">special row</td>
</tr>
</table>

<div id='my_div'>
Test
</div>

 </body>
 </html>