Update Panel rendering table row wrong

Question

I am having an issue when my asp.net AJAX Update Panel updates it renders the contents at the top of my table rather than in the place it belongs below is my code:

<tr>
   <td>
   </td>
   <td>
      <asp:CheckBox ID="ddCheckbox" runat="server" Text="Checkbox"
           AutoPostBack="true" OnCheckedChanged="ddCheckboxChanged" />
   </td>
</tr>

    <asp:UpdatePanel ID="uxUpdatePanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
       <ContentTemplate>
          <tr>
             <td>
               Some Field:
             </td>
              <td>
                 <asp:TextBox ID="ddSomeField" runat="server" />
              </td>
            </tr>
          </ContentTemplate>
          <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddCheckbox" EventName="CheckedChanged" />
          </Triggers>
    </asp:UpdatePanel>

In my server side event I am just enabling/disabling the textbox.

Answer 1

Have you done a view source to confirm that it is actually rendering it in that location within the HTML itself? Browsers will sometimes render tags outside of the table if the table is malformed. It may appear to be defined properly in the HTML itself, but a missing closing tag etc may cause it to render that way.

Answer 2

When the Update Panel posts back to the server, it posts everything back (including viewstate). Why not just do some simple javascript? It would be much more efficient.

Answer 3

I believe it's due to how you are nesting the Update panel. If you change the update panel to be a child of the td, rather than of the table:

<tr>
  <td>
    Some Field:
  </td>
  <td>
    <asp:UpdatePanel ID="uxUpdatePanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
       <ContentTemplate>
         <asp:TextBox ID="ddSomeField" runat="server" />
       </ContentTemplate>
       <Triggers>
          <asp:AsyncPostBackTrigger ControlID="ddCheckbox" EventName="CheckedChanged" />
       </Triggers>
    </asp:UpdatePanel>
   </td>
 </tr>

You should be all fixed up.

Answer 4

1) create a custom updatepanel control ( copy/paste from SingingEels )

2) use this custom updatepanel control with an attribute RenderedElement="TBODY"

3) nest your table as follow:

<TABLE>
  <TR>
    <TD>outside updatepanel</TD>
  </TR>
  <SingingEels:SemanticUpdatePanel ID="myUpdatePanel" runat="server" RenderedElement="TBODY">
    <ContentTemplate>
      <TR>
        <TD>inside updatepanel - 1th row</TD>
      </TR>
      <TR>
        <TD>inside updatepanel - 2nd row</TD>
      </TR>
      <TR>
        <TD>inside updatepanel - last row</TD>
      </TR>
    </ContentTemplate>
  </SingingEels:SemanticUpdatePanel>
  <TR>
    <TD>outside updatepanel</TD>
  </TR>
</TABLE>