LoadingPanel not displaying with client-side ajaxRequest

[Josh Anderson]

I have a page set up with a RadAjaxManager in which I have a javascript call that utilizes the ajaxRequest client-side method.  The operation works fine, but upon clicking the link that fires that javascript, the loading panel does not display.  Is the loading panel not supported for a client-side request?

Josh

[Serrin]

Hey Josh,

RadAjax definitely does support the loading panel on the client-side, check out this demo:

http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/clientsideapi/defaultcs.aspx

It specifically handles the request using ajaxManager.ajaxRequest(arguments), and even though it goes quick the loading panel does definitely pop up over the text block area.

Would you be able to post your code so we can see a little more of how you are handling the request? 

[Josh Anderson]

I'm using the client-side ajaxRequest call to do a sign-out for the site visitor.  I won't bury you with code, but here are the relevant parts:

Javascript

     <telerik:RadCodeBlock ID="codeblockScripts" runat="server">
            <script type="text/javascript">
                function signOut() {
                    if (changes)
                        tb_show("Signout Confirmation", "#TB_inline?inlineId=confirmSignOut&width=300&height=120");
                    else
                        doSignOut();
                }

                function doSignOut() {
                    $find("<%= ajaxmanagerMain.ClientID %>").ajaxRequest("signout");
                }
            </script>
        </telerik:RadCodeBlock>

The confirmation piece is a jQuery thickbox that just warns them if they're going to lose any changes they've made on the page.  Next is the AjaxManager definition:

      <telerik:RadAjaxManager ID="ajaxmanagerMain" runat="server" DefaultLoadingPanelID="loadingPanel" OnAjaxRequest="ajaxmanagerMain_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="buttonHierarchySearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="treeviewHierarchy" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="buttonClearHierarchySearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="treeviewHierarchy" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="checkboxShowInactives">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="treeviewHierarchy" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="MainPaneContent">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="treeviewHierarchy" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

You can ignore most of those settings, but note the loading panel is identified.  Here's the definition for the loading panel:

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server" IsSticky="true">
      <div id="divLoading" style="position: absolute; top: 0px; left: 50%; z-index: 1000; background-color: Red; color: White; padding: 2px 6px; font-weight: bold;"><img src="/images/loading2.gif" alt="" style="vertical-align: text-bottom;" />Loading...</div>
</telerik:RadAjaxLoadingPanel>

Finally, here's the codebehind for the ajaxrequest event:

        protected void ajaxmanagerMain_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "signout")
            {
                FormsAuthentication.SignOut();
                Response.Redirect("/login.aspx");
            }
        }

The loading panel shows properly for any of the explicitly bound items, but not for this particular client-side call.  Not to muddy the waters, but I've also noticed that if a page is ajax-enabled but the controls aren't explicitly bound through the AjaxSettings, I'll get a partial postback but no loading panel.  It's very strange.

Josh

[Dimo]

Hi Josh,

RadAjaxLoadingPanel is displayed during AJAX requests over the currently updated controls, depending on the AJAX initiator and list of updated controls defined in the RadAjaxManager's AjaxSettings.

In your code snippet there is no AjaxSetting, which defines RadAjaxManager as an AJAX initiator and no controls, which should be updated by the manager. That's why the loading panel doesn't show.

The online demo, provided by Serrin above, demonstrates how to define RadAjaxManager as an initiator:

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="lblDescription" />
    </UpdatedControls>
</telerik:AjaxSetting>


In your case, maybe you don't have a suitable element to ajaxify by the RadAjaxManager, so an alternative option is to display the loading panel explicitly over the whole page (use the form ID as a parameter of the loading panel's show() method):

http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.