Display a loading animation while an external page is loading in a RadPane

HOW - TO: Display a loading animation while an external page is loading into a RadPane




A common usage of RadSplitter's RadPane is for loading external pages through setting its ContentUrl. A better appearance and a user friendly practice is to show an image while the content page is loading in order to inform the user what is happening.

This can be achieved by using the RadAjaxLoadingPanel control.

NOTE: This feature is supported out of the box since Q1 2011. The corresponding property is ShowContentDuringLoad and is shown in this online demo.

The main idea of the discussed approach is the following one:

1. Declare a RadAjaxLoadingPanel on the main page which contains the RadSplitter control.
2. Define global variables for the loading panel, the particular RadPane and its content element in order to determine later that they have already been set.  
3. Define a javascript function which sets the proper values for the global variables by referencing their corresponding objects. You should also set the content url and show the loading panel through controls' client-side API as shown below:
   
   

   function setNewUrl()

   {

   var splitter = $find("<%=RadSplitter1.ClientID %>");

   pane = splitter.getPaneById("<%= RadPane2.ClientID %>");

   pane.set_contentUrl("ContentPage.aspx");

   contentElement = "RAD_SPLITTER_PANE_CONTENT_<%=RadPane2.ClientID %>";

   loadingPanel = $find("<%= AjaxLoadingPanel1.ClientID %>");

   loadingPanel.show(contentElement);

   }

4. Define a javascript function which hides the loading panel if it is shown and set the global variables back to null values:
   
   

   function HideLoadingPanel()

   {

   if (loadingPanel && pane)

   {

   loadingPanel.hide(contentElement);

   loadingPanel = null;

   pane = null;

   }

   }

5. In the content page you should define a function which references the main page and executes the function which hides the loading panel. Attach this function to the window.onload event:
   
   

   window.onload = function()

   {

   window.parent.HideLoadingPanel();

   }

In this manner you will ensure that when the external page starts loading in the RadPane, the loading panel  will be shown and when the loading ends, it will hide.

You can find a working demo in the attached archive file. In this demo, the time taking loading of the content page is simulated by the Thread.Sleep method in its code behind.

Please, note, that this approach concerns only scenarios in which the main page and the content page are from the same domain due to security reasons.