Ir al contenido principal

Mostrar un Loading Panel al cargar y al procesar los datos que consuman mucho tiempo de proceso

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>

Comentarios

Entradas más populares de este blog

Eliminar registros repetidos de una DataTable

A continuación les muestro un ejemplo de como eliminar los registros repetidos de una DataTable . //DataTable con los reqistros repetidos (myRepeatedData) //Filtramos los registros únicos en la variable var. var uniqueRows = myRepeatedData.AsEnumerable().Distinct(DataRowComparer.Default); //Lo copiamos a otra DataTable DataTable myUniqueData = uniqueRows.CopyToDataTable(); Con esto tendremos en la DataTable myUniqueData los registros únicos.

Obtener el valor de un control ASPxSpinEdit dentro de un ASPxGridView

Para obtener el valor de un control ASPxSpinEdit dentro de un ASPxGridView -Agregar un control ASPxSpinEdit dentro del DataItem Template -Hacer que se muestren los datos de la fuente poniendo en el atributo value la expressión siguiente: ' <%# Bind("GroupCode") %> '  donde GroupCode es el nombre de la columna en la fuente de datos. -Hacer que el evento ValueChanged se procese en el servidor agregando lo siguiente en los eventos del cliente:   <ClientSideEvents ValueChanged="function(s, e) {  e.processOnServer = true; }" /> El markup completo de la columna quedaría así: <dx:GridViewDataTextColumn Caption="Grupo" FieldName="GroupCode" ShowInCustomizationForm="True" VisibleIndex="4">    <PropertiesTextEdit DisplayFormatInEditMode="True" DisplayFormatString="g">    </PropertiesTextEdit>    <DataItemTemplate>       <dx:ASPxSpinEdit ID="spinEdi...