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>

Cambiar las propiedades de un control dentro de un DataItemTemplate del grid de Devexpress en el lado del cliente

-Asignar el nombre de la instancia del cliente en el evento Init del Control protected void spinEditQty_Init(object sender, EventArgs e)
 {
  ASPxSpinEdit spinEdit = sender as ASPxSpinEdit;
  GridViewDataItemTemplateContainer c = spinEdit.Parent as GridViewDataItemTemplateContainer;
  spinEdit.ClientInstanceName = String.Format("spinEditQty{0}", c.KeyValue);
 }


-Instanciar el control en el lado del cliente usando el nombre de instancia asignado anteriormente


var controlID = "spinEditQty" + id;
var name = eval(controlID);


-Modificamos alguna propiedad del control (en este caso la propiedad valor)


name.SetValue(12); //ponemos 12 como valor del control.

Acceder a los valores y métodos de un control dentro de un ASPxGridView en el lado del cliente.

-Agregar una propiedad de JavaScript al control en el evento Init del Grid.

         protected void chkCb_Init(object sender, EventArgs e)
        {
            ASPxCheckBox chk = sender as ASPxCheckBox;
            GridViewDataItemTemplateContainer c = chk.Parent as GridViewDataItemTemplateContainer;
            chk.JSProperties.Add("cpIndex", c.ItemIndex);
        }

-Agregar el control dentro del DataItemTemplate del grid y agregar eventHandler OnChecked en el evento CheckedChanged del lado del cliente.


 <dx:GridViewDataTextColumn Caption="CB" ShowInCustomizationForm="True"
  VisibleIndex="0">
  <DataItemTemplate>
   <dx:ASPxCheckBox ID="chkCb" runat="server" CheckState="Unchecked"
    ClientInstanceName="chkCb" oninit="chkCb_Init">
    <ClientSideEvents CheckedChanged="OnChecked" />
   </dx:ASPxCheckBox>
  </DataItemTemplate>
 </dx:GridViewDataTextColumn>


-Capturar el evento con JavaScript en el lado del cliente e implementar la lógica deseada.
  function OnChecked(s, e) {
        value = s.GetChecked();
        if (value != true) {
            // Código a ejectuar si el control está marcado
   alert(s.CpIndex);  //Esta propiedad es la que asignamos en el evento Init del control.
        }
        else {
            // Código a ejectuar si el control no está marcado
   alert(s.CpIndex);  //Esta propiedad es la que asignamos en el evento Init del control.
        }
    }