Show AJAX Loading Panel on initial page load		Send comments on this topic.
See Also

AJAX Loading Panel > AJAX Loading Panel How-To > Show AJAX Loading Panel on initial page load

Glossary Item Box

Although AJAX Loading Panel is designed to be shown on update of control(s) with an AJAX request, people would like to show it on initial page load as well. It is not supported out of the box, however it is easy achievable using some additional code.

The focus on the following example is the window.onload function, which initiates an AJAX request from the client. To be more functional, we have added an update of an ASP:Panel to this example. Thus, we need an AJAX Manager setting, where RadAjaxMnager updates the panel (shows an initially invisible inner panel actually).

JavaScript	Copy Code
<script type="text/javascript"> window.onload = function() { setTimeout( function(){ window[ "<%= RadAjaxManager1.ClientID %>"].AjaxRequest("InitialPageLoad"); }, 200); } </script>

ASPX Copy Code

<rad:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
               <AjaxSettings>
                   <rad:AjaxSetting AjaxControlID="RadAjaxManager1">
                       <UpdatedControls>
                           <rad:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="AjaxLoadingPanel1" />
                       </UpdatedControls>
                   </rad:AjaxSetting>
               </AjaxSettings>
           </rad:RadAjaxManager>
           <asp:Panel ID="Panel1" runat="server">
               <asp:Panel ID="Panel2" Visible="false" runat="server">
                My content:
              </asp:Panel>
           </asp:Panel>
           <rad:AjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Width="75px">
               <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" />
           </rad:AjaxLoadingPanel>

C# Copy Code

   protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.WebControls.AjaxRequestEventArgs e)
   {
       if (e.Argument == "InitialPageLoad")
       {
           //simulate longer page load
           System.Threading.Thread.Sleep(2000);
           Panel2.Visible = true;
       }
   }

VB.NET Copy Code

    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.WebControls.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
        If e.Argument = "InitialPageLoad" Then
            'simulate longer page load
            System.Threading.Thread.Sleep(2000)
            Panel2.Visible = True
        End If
    End Sub

RadAjax for ASP.NET

See Also