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

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>

Answer 2

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.