best "<tr>" container?

[200dogz]

Hi guys,

I'm making an expandable table which currently layers of <table>s are used to contain the table rows in order to show/hide them.

This works, but having to format columns of the child table to be like its parent table can be quite annoying. Before I use tables to do this I use <tbody> to store the <tr>s. Doing so made the format looked perfect unfortunately it could only be used for at most two layers, since having a <tbody> inside another one is illegal.

So my question is; is there another "container" that I can use to show/hide groups of rows, but without having to re-format the rows? Preferably be done on client-side.

Thanks :)



ps. <div> cannot be used to hold table rows, while I think asp:Panel and asp:PlaceHolder might do the trick, I couldn't get them to hide the rows for some reason..

[Curtis Rutland]

An <asp:Panel> is rendered as a <div> clientside IIRC, so if divs don't work, that won't work.

[Plater]

Couldn't you just change the CSS class of the rows you want to show/hide?

[Frinavale]

You should be able to accomplish this using CSS.
You need to give each row an ID so that you can access it through JavaScript and change it's style client side.

You need to store the IDs of the rows that you wish to control the styles of.
It would be a good idea to store it in a JavaScript Array (using the ClientScript.Re gisterArrayDecl aration method). Your JavaScript method that changes the style will then loop through this declared array and change the styles of the rows listed there.

Although, I'm not sure if this is necessary because I'm not clear on what you are trying to do....

If you change the style of the parent row so that it no longer shows, then all of the child controls within that row will also no longer show....

[200dogz]

@Plater
Yes I'm using CSS to hide/show. It's just that I feel it might be "nicer" to group the rows into a container, so that instead of having to show/hide all the rows it can be done in one statement :).

If I don't put them into group, it will run into some problems:

Say if I have three layers of rows, if I expand a child row, then its grandchild rows, then collapse the child row. The next time I expand the child row, the grandchild will not be collapsed again...

yea I sucked at explaining stuffs :(

[Plater]

That situation you were worried about, is generally how most things work?

[200dogz]

@Plater
Don't think so; at least it's like that for windows explorer, but yea I will definitely give what you guys suggest a try if time allows. Thanks :)

[Plater]

That is how my explorer works. And how my SQL Server manager works.

If you would prefer that all "grandchild ren" be collapsed when you collapse a child, you could consider having javascript iterate through looking for things to collapse?

[200dogz]

@Plater
No, what I mean is when you expand the child:

- child
+ gchild

then the grand child:

- child
- gchild
<tr>..
<tr>...

Now collapse the child, and then expand it again, gchild will not be "expanded", because all the rows under child were hidden when we collapsed it. This won't happen if the rows are placed inside containers.

This thing really doesn't bother me; I could go with either way. I was just wondering if there's certain container that can hold rows, while not losing the format of the parent.

[200dogz]

@200dogz
[FONT=Times New Roman]Container:[/FONT]
[FONT=Times New Roman]Pros:[/FONT]
[FONT=Times New Roman]Cons:[/FONT]
[FONT=Times New Roman]No container[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]No need to reformat the rows.[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Doesn’t “remember” what children have been expanded when the parent is collapsed.[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Need to execute one JS statement for each row to be collapsed.[/FONT]
[FONT=Times New Roman]<tbody>[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Excellent format[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Limited to maximum two layers.[/FONT]
[FONT=Times New Roman]<table>[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Structure works.[/FONT]
[FONT=Wingdings]l [/FONT][FONT=Times New Roman]Bad format, table cells size change because of border (even if cellspacing and border width are set to 0)[/FONT]


Like I mentioned, I'm bad at explaining things :(.

Cheers