Dynamically updating rows in an HTML table using UpdatePanel

Question

I have been using the ASP.NET AJAX UpdatePanel control recently for some of the intranet applications I have been working on, and for the most part I have used it to dynamically update data or hide and show controls on forms based on user actions.

There is one place where I had problems, and I wonder if anyone has any advice. My form uses a fairly typical table-based layout, where the table is used to display a grid of labels and fields to populate by the user. (I already know that tablet layouts are ignored by some people, and I understand the pros and cons. But I made this choice, so please do not answer "Do not use table layout.")

Now my problem is that there are times when I would like to wrap the UpdatePanel around a set of rows so that I can hide and show them dynamically, but the UpdatePanel really does not allow you to do this. The main problem is that it wraps divs around them, and as far as I know, you cannot wrap divs around table rows. It is not valid HTML.

Thus, I was dealing with making my dynamic rows part of a whole new table completely, which is good, but then you have to deal with aligning all columns manually with the table above it, and that is a real pain and quite fragile.

So, the question is ... does anyone know of a technique for dynamically creating or updating rows using either UpdatePanel or something similar? We hope that the solution will be almost as simple as removing the UpdatePanel on the page, but even if it is not, I would still like to hear it.

Answer 1

Answer: In the end, this cannot be done with UpdatePanel. The best you can achieve is to update the entire table, but not individual rows.

Answer 2

An UpdatePanel is displayed as a DIV tag and therefore is not valid between table rows. If you only want to hide the content while maintaining the (very very bad) layout of the table, include the style tag in the line with ASP var there for the visibility value, like this:

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

Then you manipulate the visible variable as needed.

This suggests that brushing off the correct layout hurts you.

Answer 3

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

If you use a client infrastructure such as jQuery, this makes it even easier - you can 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

If you dynamically create your controls, you can decide what things to show or hide when creating 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 the code behind:

 row1.visible = false; 

To modify @Rob Allen's answer, do the following:

CSS

 .hidden_row { display: none; } 

Aspx

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

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

Answer 5

I had the same problem and settled on a solution.

You can update the TD parts of the table if the table itself is also inside the update panel.

I do not know why. This works for me.

 <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> <table ID="Table1"> <tr> <td > ... </td> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <td > .... </td> <td > ... </td> <td > ... </td> </ContentTemplate> </asp:UpdatePanel> </tr> </table></ContentTemplate></asp:UpdatePanel> 

Answer 6

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; } 

Answer 7

In our project, we found some solution to this problem. We had to create complex raports with many active elements on each line (buttons for editing, accepting, etc.).

We created a div that fits in the updatepanel (to update the entire table if necessary). In this div, we created a table with a header definition and separate tables for eaach rows (these tables are placed in the update panel). To create equal columns in each row, we must use css classes for each table cell.

So, we have something like this (on each line there are several buttons, drop-down menus, tooltips, etc., but to understand the idea, I truncated it into one column):

 <UpdatePanel> <DIV> <TABLE> <TR> <TH class="h1">Name</TH> </TR> </TABLE> <UpdatePanel Id='InnerPanel1'> <TABLE> <TR> <TD class="h1">John</TD> </TR> </TABLE> </UpdatePanel> </DIV> </UpdatePanel> 

It is not elegant and generates large HTML, but it works.