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.

Solution 1

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.

Solution 2

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.

Solution 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>

Solution 4

Asp code:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table width="100%">
    <tr>
        <td style="width: 300px">
            Employee First Name
        </td>
        <td>
            <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
        </td>
    </tr>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <tbody>
                <tr>
                    <td style="width: 300px">
                        Date Of Birth
                    </td>
                    <td>
                        <asp:TextBox ID="txtDOB1" runat="server" OnTextChanged="txtDOB_TextChanged" AutoPostBack="true"></asp:TextBox>
                        <asp:CalendarExtender ID="txtDOB1_CalendarExtender" runat="server" Enabled="True"
                            TargetControlID="txtDOB1">
                        </asp:CalendarExtender>
                    </td>
                </tr>
                <tr>
                    <td style="width: 300px">
                        Age
                    </td>
                    <td>
                        <asp:TextBox ID="txtAge" Style="font-weight: bold; font-size: large" runat="server"
                            Enabled="false"></asp:TextBox>
                    </td>
                </tr>
            </tbody>
        </ContentTemplate>
    </asp:UpdatePanel>
    <tr>
        <td align="right" style="width: 300px">
            <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" />
        </td>
        <td>
            <asp:Button ID="btnClear" runat="server" CssClass="button" Text="Reset" />
        </td>
    </tr>
</table>

Class code:

protected void txtDOB_TextChanged(object sender, EventArgs e)
{
    try
    {
        DateTime Today = DateTime.Now;
        DateTime DOB = Convert.ToDateTime(txtDOB1.Text);
        ArrayList arr = new ArrayList();
        arr = span(Today, DOB);
        arr[0].ToString();//For Years
        arr[1].ToString();//For Months
        arr[2].ToString();//For Days
        txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString();

    }
    catch (Exception ex)
    {

        lblError.Text = "Error : " + ex.Message ;
    }
}
public ArrayList span(DateTime f, DateTime l)
{
    int days;
    int months;
    int years;

    int fird = f.Day;
    int lasd = l.Day;

    int firm = f.Month;
    int lasm = l.Month;

    if (fird >= lasd)
    {
        days = fird - lasd;
        if (firm >= lasm)
        {
            months = firm - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }
    else
    {
        days = (fird + 30) - lasd;
        if ((firm - 1) >= lasm)
        {
            months = (firm - 1) - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm - 1 + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }


    if (days < 0)
    {
        days = 0 - days;
    }
    if (months < 0)
    {
        months = 0 - months;
    }
    ArrayList ar = new ArrayList();
    ar.Add(years.ToString());
    ar.Add(months.ToString());
    ar.Add(days.ToString());
    return ar;
}

Solution 5

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.

View more solutions

Comments

[jeremcc]

If you saw my form, I think you'd understand. It is very grid-like, as are most corporate data entry forms. Laying that out using all divs and floats would be very painful in my opinion. That said, thanks for the tip.

[Rob Allen]

check out fancy forms layout (google it) or developer.yahoo.com/yui/grids. It's not as big a pain as you think. I've built many intranet applications all of which have forms.

[jeremcc]

Interesting... I just know that laying it out by hand is difficult, but perhaps with a good library, maybe I'll become a convert. ;-) Thanks.

[Rob Allen]

It's not bad at all with the Fieldset tag (fancy forms).

[jeremcc]

Right, I saw that. Not quite a library, but a technique. I'll give it a try when I get a chance. Thanks again.

[Astra]

Keep in mind that if a user uses a view source (one that fetches what is currently in the DOM) will still show those rows if you use this method.

[jeremcc]

The question is specifically related to using an UpdatePanel to refresh rows as a partial page update. If I were refreshing the whole page, then yeah, what you are saying would be fine.

[jeremcc]

The showing/hiding thing is really just one example. I have other areas where I am in fact updating data as well... for example refreshing a set of related drop down lists spanning multiple rows. But the thanks for the jQuery example, it's next on my list of things to learn.

[Daniel Schaffer]

jQuery will also make it easier to update the table, since with a straight UpdatePanel there's no good way to update individual rows without reloading/rebinding the entire table. With jQuery, you'll be able to add/remove/move/whatever individual rows, if that's what you want to do.

[Olle Sjögren]

Hi and welcome to SO. Please try to explain your answer in words, not just in code. And since you answer a 3 year old question which has already been answered several times before, please tell us how your answer differs from the other answers.