Loading Panel for ASP.NET Web Forms - How to implement a custom loading panel for the ASPxCallbackPanel control

This example demonstrates how to use the ASPxLoadingPanel control to implement a custom loading panel for the ASPxCallbackPanel control.

The ASPxCallbackPanel control includes a built-in loading panel. However, you can implement a custom panel in the following way:

1. Set the SettingsLoadingPanel.Enabled property to false to disable the default panel.

   <dx:ASPxCallbackPanel ID="CallbackPanel" ClientInstanceName="CallbackPanel" ...>
       <SettingsLoadingPanel Enabled="false" />
       ...

2. Use the ASPxLoadingPanel control to implement a custom loading panel.

   <dx:ASPxLoadingPanel ID="LoadingPanel" ClientInstanceName="LoadingPanel" runat="server"
       Modal="true" HorizontalAlign="Center" VerticalAlign="Middle">
       <Image Url="Images/load.gif" Height="50px" Width="50px"></Image>
   </dx:ASPxLoadingPanel>

3. Handle the callback panel's BeginCallback and EndCallback events to show and hide the custom loading panel, respectively.

   <dx:ASPxCallbackPanel ID="CallbackPanel" ClientInstanceName="CallbackPanel" ...>
       <ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback" />
       ...

   function OnBeginCallback(s, e) {
       LoadingPanel.Show();
   };
   function OnEndCallback(s, e) {
       LoadingPanel.Hide();
   };

Additionally, this example demonstrates how to add, modify, and hide controls in the ASPxCallbackPanel control in the Callback event handler.

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)