Primero hay que crear el Panel como en el siguiente ejemplo:
<dx:ASPxLoadingPanel ID="loadingPanel" ClientInstanceName="loadingPanel" runat="server" Modal="true"
Width="70%" Height="30px" Text="Se está procesando su petición; por favor no abandone la sesión porque podría tener inconsistencia en sus datos..." >
</dx:ASPxLoadingPanel>
Crear una función con Javascript que muestre el panel :
function showLoadingPanel() {
loadingPanel.Show();
}
Si se desea que solo muestre el panel encima de un control como el ASPxGridview se puede usar el método ShowInElementByID del Panel:
function showLoadingPanel() {
loadingPanel.ShowInElementByID(grvHarnessItems.name);
}
Crear una función con Javascript que esconda el panel:
function OnControlsInitialized(s, e) {
setTimeout(function () {
loadingPanel.Hide();
}, 1000);
}
Mostrar el panel al inicio de la página si esta tiene que cargar muchos datos y se tardará más de 2 segundos. (Creo que es buena práctica hacer que las consultas a la base de datos consuman menos de 2 segundos, pero si esto no es posible recomiendo mostrar el panel):
<script type="text/javascript">
showLoadingPanel();
</script>
Mostrar el panel al presionar cada botón que vaya a efectuar una tarea que consuma más de 2 segundos, llamando al método que muestra el Panel, usando el método Click del lado del cliente:
<dx:ASPxButton ID="btnSave" runat="server" OnClick="btnSave_Click"
Text="Grabar" Width="120px" style="display:inline-block;">
<ClientSideEvents Click="function(s, e) {
showLoadingPanel();
}" />
<Image Url="~/Content/Images/Save.png" Width="24px">
</Image>
</dx:ASPxButton>
Usar el objeto ASPxGlobalEvents para detectar cuando todos los controles han sido inicializados y esconder el Panel con la función creada para tal evento:
<dx:ASPxGlobalEvents ID="ge" runat="server">
<ClientSideEvents ControlsInitialized="OnControlsInitialized" />
</dx:ASPxGlobalEvents>
