Hi,
I want to add an expandable box below a row.
eg: + ID Name AGE
… --------------------
… | Some Data … |
… | Some Data … |
… --------------------

• ID2 Name AGE
• ID3 Name AGE
• ID4 Name AGE

such that when the “+” is clicked the box expands.
This can contain elements.
When ever I add a box(Block Panel) if I make “position:relative”, the entire column expands.
If i make it absolute, the box hides the subsequent columns.

Is there a solution for it.

One solution I fount is to use an iteraor and create the structure myself. However after that it becomes very difficult to retrieve the individual element ids using javascript.

One solution would be to use a custom script to add a new row below the row you clicked on and move your details block into the new row.

For example, the click handler for the link could do something like this:

function toggleRowDetails(rowId, blockId) {
if ($(rowId + "_detailsRow")) {
//hide details row

//move the block back to the orginal location
$(blockId).hide();
Element.relocate($(blockId));

//remove the details row from the table
$(rowId + "_detailsRow").remove();
} else {
//show details row

//insert a new row into the table.
$(rowId).insert({
after: "<tr id='" + rowId + "_detailsRow'><td id='" + rowId + "_detailsCell' colspan='2'></td></tr>"
});

//move the block into the new row.
Element.dislocate($(blockId), $(rowId + "_detailsCell"));
$(blockId).show();
}
}

I’ve also attached a sample project that demonstrates this.

table_sample.zip (15.5 KB)