Skip to content

Use the loading panel's client-side functionality to invoke the panel on page load.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/asp-net-web-forms-loading-panel-display-control-on-page-load

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Loading Panel for ASP.NET Web Forms - How to show a loading panel on page load

This example demonstrates how to use the loading panel's client-side functionality to invoke the panel on page load. The following approaches are available:

  • Show the panel on the first page load and after a postback (OnLoad.aspx).
  • Show the panel after a postback only (OnPostback.aspx).

Overview

Call the panel's client-side Show method in the script section to invoke a loading panel on page load.

<script type="text/javascript">
    lp.Show();
</script>
<dx:ASPxLoadingPanel ID="lp" ClientInstanceName="lp" Modal="true" runat="server" />

To hide the loading panel when all client-side objects are already initialized, use the ASPxGlobalEvents component and handle its client-side ControlsInitialized event. In the handler, call the panel's Hide method.

function OnControlsInitialized(s, e) {
    // Hide the panel
    // lp.Hide();

    // Hide the panel after timeout
    setTimeout(function () {
        lp.Hide();
    }, 2000);
}
<dx:ASPxGlobalEvents ID="ge" runat="server">
    <ClientSideEvents ControlsInitialized="OnControlsInitialized" />
</dx:ASPxGlobalEvents>

To invoke a loading panel before a postback, handle the form's client-side onsubmit event and call the panel's Show method in the handler. After the entire page is reloaded, the panel is hidden.

function OnSubmit() {
    lp.Show();
}
<form id="frmMain" runat="server" onsubmit="OnSubmit();">
    <dx:ASPxLoadingPanel ID="lp" ClientInstanceName="lp" Modal="true" runat="server" />
</form>

Files to Review

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)