Dynamically refreshing rows in an HTML table using an UpdatePanel

Question

I have been using the ASP.NET AJAX UpdatePanel control a lot lately for some intranet apps I've been working on, and for the most part, I have been using it to dynamically refresh data or hide and show controls on a form based on the user's actions.

There is one place where I have been having a bit of trouble, and I'm wondering if anyone has any advice. My form is using a pretty typical table based layout where the table is used to display a grid of labels and fields for the user to fill out. (I already know table based layouts are eschewed by some people, and I understand the pros and cons. But that's the choice I've made, so please don't answer with "Don't use a table based layout".)

Now my problem is that there are times when I would like to wrap an UpdatePanel around a set of rows so that I can hide and show them dynamically, but the UpdatePanel doesn't really let you do that. The basic problem is that it wraps a div around them, and as far as I know, you cannot wrap a div around table rows. It is not valid HTML.

So the way I have been dealing with it is to make my dynamic rows part of a whole new table entirely, which is OK, but then you have to deal with aligning all the columns manually with the table above it, and that is a real pain and pretty fragile.

So, the question is... does anyone know of any technique for dynamically generating or refreshing rows using either an UpdatePanel or something similar? Hopefully, the solution would be almost as easy as dropping an UpdatePanel on the page, but even if not, I'd still like to hear it.

Answer 1

An UpdatePanel renders as a DIV tag and is therefore invalid between table rows. If all you want is to hide the content while maintaining your (very very bad) table layout, include a style tag in the row with an ASP var in there for the visibility value like this:

<tr style="display: <%= visible %>">
     <td></td>
</tr>

Then you manipulate the visible variable as needed.

That said, brushing aside proper layout is hurting you here.

Answer 2

If you are dynamically creating your controls, you can decide which things to display or hide while generating your controls.

You can also do things like this:

<table>
    <tr id="row1" runat="server">
        <td>Label</td><td>Field</td>
    </tr>
</table>

And from code behind:

row1.visible = false;

A modification of @Rob Allen's answer, do this:

CSS

.hidden_row {
    display: none;
}

ASPX

<tr class="<%= variable %>">

Same idea, just using a class instead of coding the CSS directly into the table.

Answer 3

UpdatePanels (or AJAX postbacks in general) should not be used to just hide or show elements. If you need to update data, that's one thing... but otherwise, just use javascript to change the display css property.

If you use a client framework like jQuery, that makes it even easier - you could do something like this:

<button onclick="$('.inactive').toggle();">Toogle Inactive</button>

<table>
<tr class="inactive"><td>Inactive 1</td></tr>
<tr class="inactive"><td>Inactive 2</td></tr>
<tr><td>Active 1</td></tr>
<tr><td>Active 2</td></tr>
</table>

Answer 4

Answer: In the end, there is no way to do this using an UpdatePanel. The best you can achieve is refreshing the entire table, but not individual rows.