devexpress-examples / how-to-show-aspxloadingpanel-on-page-startup-e4013 Goto Github PK

View Code? Open in Web Editor NEW

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

License: Other

C# 5.13% ASP.NET 88.93% Visual Basic .NET 5.94%

how-to-show-aspxloadingpanel-on-page-startup-e4013's Introduction

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>