XmlHttpPanel within an AjaxPanel

3 posts, 0 answers
  1. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 05 Apr 2011 Link to this post

    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
        function GetData<%=XmlHttpPanel1.ClientID %>() {
            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 %>','');
        Width="300px" >
    <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanel1" 
    <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.

  2. Pero
    Pero avatar
    1156 posts

    Posted 07 Apr 2011 Link to this post

    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,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 25 Apr 2011 Link to this post

    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:

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