XmlHttpPanel within an AjaxPanel

[Mike]

I have an XmlHttpPanel that is within an AjaxPanel.  The problem I'm having is the first time there is a postback, it does a full page refresh instead of a partial page refresh; it's as if the AjaxPanel isn't having an effect.  But on subsequent postbacks it does the partial page refresh the way I want it to.

Here's a more detailed description:

I have a user control, named RecordSelect.ascx, that contains an XmlHttpPanel.  It calls a web service that returns HTML.  It calls __doPostBack to post back to the web server.  Here is the markup of my user control:
 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RecordSelect.ascx.cs" Inherits="RecordSelect" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>


<script type="text/javascript">
    var call = 0;
    function SetValue<%=XmlHttpPanel1.ClientID %>(count) {
        var panel = $find("<%=XmlHttpPanel1.ClientID %>");
        //you can pass any kind of object to the GetHTML method
        //right now we will pass an array
        var array = [];
        if (document.getElementById('<%=txtSearchString.ClientID %>').value.length > 1 && count == call) {
            array[0] = document.getElementById('<%=txtSearchString.ClientID %>').value;
            array[1] = "<%=XmlHttpPanel1.ClientID %>";
            array[2] = document.getElementById('<%= hidANE.ClientID %>').value;
            call = 0;
            //you can pass any kind of object to the GetHTML method
            //right now we will pass an array
            panel.set_value(array);
        }
    }

    function GetData<%=XmlHttpPanel1.ClientID %>() {
        call++;
        setTimeout('SetValue<%=XmlHttpPanel1.ClientID %>(' + call + ')', 200);
    }

    function RecordClicked<%=XmlHttpPanel1.ClientID %>(Name, ID) {
        document.getElementById('<%= hidId.ClientID %>').value = ID;
        document.getElementById('<%= txtSearchString.ClientID %>').value = Name;
        var panel = $find("<%=XmlHttpPanel1.ClientID %>");

        // this will clear the xmlhttp panel.
        //document.getElementById('divTypeAheadOptions').parentNode.innerHTML = '';
        $find('<%= txtSearchString.ClientID %>').updateDisplayValue();
        __doPostBack('<%= cmdHid.ClientID %>','');
    }

    function AddNewClicked<%=XmlHttpPanel1.ClientID %>() {
        document.getElementById('<%= hidId.ClientID %>').value = -1;
        __doPostBack('<%= cmdHid.ClientID %>','');
    }

</script>

<telerik:RadTextBox
    ID="txtSearchString"
    runat="server"
    EmptyMessage=""
    Width="300px" >
</telerik:RadTextBox>
<telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanel1"
        WebMethodPath="~/services/TypeAhead.asmx"
        WebMethodName=""
        RenderMode="Block"
        EnableClientScriptEvaluation="true">
</telerik:RadXmlHttpPanel>
<asp:HiddenField runat="server" ID="hidId"/>
<asp:HiddenField runat="server" ID="hidANE" />
<asp:Button runat="server" ID="cmdHid" CausesValidation="false" style="display: none;"/>

And here's the parent, where the RecordSelect.ascx control is declared inside a RadAjaxPanel

<telerik:RadAjaxPanel ID="radAjaxPanel1" runat="server">
          <uc1:RecordSelect runat="server" ID="selCompany" Type="Companies" EnabledAddNew="True" />
           ...

FYI -

This control is a typeahead/autocomplete type search.

The <%=XmlHttpPanel1.ClientID %> string is appended to the javascript function names so the user control can be declared multiple times on one page.  (I'm not sure if that's the proper way to do that...but it's working.)

The purpose of the cmdHid button is to prevent the __doPostBack commands from causing client-side validation, and also to associate the postbacks with the surrounding AjaxPanel, which is working for the 2nd, 3rd, 4th, etc. postbacks.  Just not the first postback.

Any help would be much appreciated.

[Pero]

Hello Mike,

Is the first postback occurring after the XmlHttpPanel has called the WebService, or at any times? Would it be possible to provide the full source code of your project, so that we can it locally?
I tried to reproduce the issue locally, but I don't know how the JS functions that perform the postbacks are called.

All the best,
Pero
the Telerik team

[Mike]

Hi Pero,

Thank you for the help.  We found the problem is that our RadAjaxPanel was declared in a UserControl that is loaded dynamically using the TemplateControl.LoadControl method in Page_Init.

We were able to work around this problem by converting our RadAjaxPanel to a regular asp:panel and then declaratively wiring it up using the RadAjaxManagerProxy, like below.  (Note that the controls below named "radAjaxPanelX" are actually asp:panels).

The following thread discusses this tricky problem:
http://www.telerik.com/community/forums/aspnet-ajax/ajax/radajaxpanel-cauing-full-postback-1st-time.aspx

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="selCompany">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radAjaxPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ddlPersonCountry">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radAjaxPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ddlCompanyCountryDDL">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radAjaxPanel3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radAjaxPanel1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radAjaxPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>