LoadingPanel not displaying with client-side ajaxRequest

4 posts, 0 answers
  1. Josh Anderson
    Josh Anderson avatar
    83 posts
    Member since:
    Dec 2005

    Posted 01 May 2009 Link to this post

    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
  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 04 May 2009 Link to this post

    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? 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Josh Anderson
    Josh Anderson avatar
    83 posts
    Member since:
    Dec 2005

    Posted 04 May 2009 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 May 2009 Link to this post

    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.
Back to Top