UpdatePanel

[Maxine]

I'm experiencing an issue getting my UpdatePanel to work properly in a C# ASP.NET project.  It's identical code to multiple other pages in my solution, but has unusual behavior on this page.  The goal is simply to allow the user to change a radio button which then alters the visibility of various table rows further down in the UpdatePanel.  Interestingly enough, the CheckBox works as expected.

In my current page, I have the following code:

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <span class="stepTitle">Set Fluid Properties</span>
        <div class="calculateInnerDiv">
            <asp:RadioButtonList ID="FluidTypeList" runat="server" AutoPostBack="true" RepeatDirection="Horizontal" TabIndex="101" OnSelectedIndexChanged="FluidTypeList_Changed">
                 <asp:ListItem Text="" Value="Liquid" />
                 <asp:ListItem Text="" Value="Gas" />
                 <asp:ListItem Text="" Value="Steam" />
             </asp:RadioButtonList>
             <asp:CheckBox ID="IsCompressibleCheckBox" runat="server" AutoPostBack="true"  Text="Fluid Is Compressible" Checked="<%# model.isCompressible %>" TabIndex="101" OnCheckedChanged="IsCompressible_Changed" />
.
.
.

However, when it renders, there is an extra RadAjaxPanel that is being created, as seen below.  This panel does not get generated in any of the other pages with a similar process.  Due to the extra panel, I receive a JS error of "Uncaught TypeError: Cannot read property 'id' of null" in "Telerik.Web.UI.WebResource.axd:3776".  It also displays "867|updatePanel|ctl00_ctl00_mainHolder_FluidTypeListPanel|" on the page.

<div id="mainHolder_updatePanel"> <!-- this is the main UpdatePanel -->
    <span class="stepTitle">Set Fluid Properties</span>
    <div class="calculateInnerDiv">
        <div class="RadAjaxPanel" id="ctl00_ctl00_mainHolder_FluidTypeListPanel"> <!-- this should not exist and throws errors like I have nested update panels -->
        <table id="mainHolder_FluidTypeList">
            <tr>...</tr>
        </table>
    </div>
    <input id="mainHolder_IsCompressibleCheckBox" type="checkbox" name="ctl00$mainHolder$IsCompressibleCheckBox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainHolder$IsCompressibleCheckBox\',\'\')', 0)" tabindex="101" />
.

For my codebehind, I run a case statement that hides/displays certain fields based on the selection, and then it calls updatePanel.Update().  Any suggestions are absolutely welcome as I'm at my wit's end on this.

 

Thank you for your time.

[Viktor Tachev]

Hello Maxine,

Are you using also RadAjaxManager or RadAjaxPanel?

If this is the case please ensure that the controls are Ajax-enabled only once. If a control is Ajax-ified by RadAjaxPanel and UpdatePanel at the same time this could result in unexpected behavior.

Regards,
Viktor Tachev
Telerik

[Maxine]

My project is all built around a Master Page that has a RadAjaxManager.  The child pages all contain the expected RadAjaxManagerProxy, however, I do not put my UpdatePanels in the proxy; I just call them out programmatically from the code-behind.  I do not use any RadAjaxPanels within the scope of this issue.

This was a large nuisance as, again, it was identical to processes I'm using throughout the project in other pages, but had different, unexplained behavior.

I did, however, manage to resolve the issue by altering my code in a less than ideal manner.  I separated that section of code into various logical UpdatePanels rather than all contained within the single UpdatePanel.  The single is better for my current needs, but this will do as it is functional.

I appreciate the reply.

[Viktor Tachev]

Hi Maxine,

I am glad that you have resolved the issue.

Note that having the whole page in a single UpdatePanel is not recommended as there will be not much performance gain. In that scenario the whole page will still be updated with each request. When having multiple UpdatePanel/RadAjaxPanel controls you can update only part of the page.

With that said, it is recommended to use single control for Ajax-ifying - either RadAjaxManager, RadAjaxPanel or UpdatePanel. This way the chance for Ajax-enabling a control multiple times will be smaller. Moreover, the code will be more consistent.

Regards,
Viktor Tachev
Telerik