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.
        }
    }

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="spinEditGroup" runat="server" Height="21px" ClientInstanceName="spinEditGroup" Value='<%# Bind("GroupCode") %>'
                                            onvaluechanged="spinEditGroup_ValueChanged" >
   <ClientSideEvents ValueChanged="function(s, e)
         { e.processOnServer = true;
   }" />
      </dx:ASPxSpinEdit>
   </DataItemTemplate>
</dx:GridViewDataTextColumn>


-Por último para leer el dato contenido dentro del control hay que hacerlo de la siguiente manera: 
GridViewDataColumn gv = this.grvHarnessItems.Columns["Grupo"] as GridViewDataColumn;
 ASPxSpinEdit spinEditGroup = this.grvHarnessItems.FindRowCellTemplateControl(i, gv, "spinEditGroup") as ASPxSpinEdit;
  miValor = spinEditGroup.Value.ToString();


El dato deseado se encontrará en la variable miValor.


Con este procedimiento se cargará la página cada vez que cambiemos el valor de un AspxSpinEdit; si deseamos hacer la captura de todos los valores dentro del ASPxSpinEdit en el cliente y obtener los valores al final (por ejemplo: al presionar el botón Grabar), no usaremos los eventos del cliente y obtendremos los valores de los controles iterando a traves de los registros del ASPxGridview tal y como se muestra en el siguiente ejemplo:

String value = String.Empty;
   if (this.grvHarnessItems.VisibleRowCount > 0){
      for (int i = 0; i < this.grvHarnessItems.VisibleRowCount; i++)
    {
    int rowKey;
    rowKey = Convert.ToInt32(this.grvHarnessItems.GetRowValues(Convert.ToInt32(i), "GroupCode"));
    ASPxSpinEdit spinEditGroupCode = (ASPxSpinEdit)grvHarnessItems.FindRowCellTemplateControl(i, (GridViewDataColumn)grvHarnessItems.Columns["Grupo"], "spinEditGroupCode ");
                    value += spinEditGroupCode .Text + ", ";
    }
  }


Los valores obtenidos de los controles estarán en el String value separados por comas.

Agregar un CustomButton a un ASPXGridview

Para agregar un CustomButton es necesario crear la columna, esto se puede hacer abriendo el markup de la página y agregando entre las etiquetas <Columns> un código similar a el siguiente:

<dx:GridViewCommandColumn VisibleIndex="0" ButtonType="Image">
 <CustomButtons>
  <dx:GridViewCommandColumnCustomButton ID="btnRemove" Image-Url="Content/Images/Remove.png" Image-Width="18px">
   <Image Width="18px" Url="Content/Images/Remove.png"></Image>
  </dx:GridViewCommandColumnCustomButton>
 </CustomButtons>
</dx:GridViewCommandColumn>


Con esto quedará definida la columna y el botón, ahora solo deberemos definir el evento en el Code Behind.
Para hacerlo creamos un método CustomButtonCallback, Visual Studio automáticamente creará los argumentos del evento y puede ser de la siguiente manera:


protected void grvHarnessItems_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e)
    {
        String value = grvHarnessItems.GetRowValues(e.VisibleIndex, "Name").ToString();
        Master.DisplayMessage(value, RootMaster.MessageType.Information);
    }


 Para obtener el valor de cualquier renglón en la columna antes creada usamos el VisibleIndex recibido en el parámetro ASPxGridViewCustomButtonCallbackEventArgs combinado con el método GetRowValues del grid.

Mostrar imágenes en una columna del ASPXGridview dependiendo de los datos contenidos en ella.

Para mostrar una imagen dependiendo de los datos de la columna es necesario seguir los siguientes pasos:

1. Agregar una columna al grid y modificar el DataItem Template.
2. Poner una imagen en el DataItem Template.
3. Modificar el evento Init y modificar su propiedad ImageUrl a traves del objeto "sender" basado en los valores de la columna.

NOTA: El valor de la columna es obtenido a través del método ASPxGridView.GetRowValuesByKeyValue.


Ejemplo:


  protected void imgStatus_Init(object sender, EventArgs e)
        {
            ASPxImage image = (ASPxImage)sender;
            GridViewDataItemTemplateContainer container = (GridViewDataItemTemplateContainer)image.NamingContainer;
            String value = grvHarnessItems.GetRowValuesByKeyValue(container.KeyValue, "ObjStatString").ToString();
            switch (value)
            {
                case "Saved":
                case "Loaded":
                    image.ImageUrl = "~/Content/Images/Saved.png";
                    break;
                case "Deleted":
                    image.ImageUrl = "~/Content/Images/Deleted.png";
                    break;
                default:
                    image.ImageUrl = "~/Content/Images/Changed.png";
                    break;
            }
        }

Agregar un campo con autoincremento a un DataGridView

Cuando necesitemos agregar una columna a nuestro DataGridView que solo nos enumere los renglones que despliega solo es necesario agregar el siguiente codigo al markup donde esta definido nuestro DataGridView:

<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
</Columns>

con esto se agregara una columna con el encabezado # y que contendra el numero de renglon de cada DataRow.

Como obtener los valores seleccionados en ASPxGridview

Cuando tenemos un Gridview con la selección habilitada y necesitamos saber cuáles registros han sido seleccionados por el usuario, debemos obtener la lista de renglones seleccionados e iterar sobre ella para obtener los datos deseados tal y como se muestra en el siguiente ejemplo:

       this.ASPxMemo1.Text = String.Empty;
            List<object> fieldValues = ASPxGridView1.GetSelectedFieldValues(new string[] { "ProductId", "Name" });
            foreach (object[] item in fieldValues)
            {
                this.ASPxMemo1.Text += item[1].ToString() + "\n";
            }

En este caso obtenemos un lista de objetos con las cadenas (del campo locationid) de cada renglón seleccionado y solo iteramos con el foreach para obtener cada Nombre del Producto (Name).

ASPxGridview con una columna con el número del renglón

Cuando necesitemos agregar una columna a nuestro DataGridView que solo nos enumere los renglones que despliega, solo es necesario agregar el siguiente código al markup donde esta definido nuestro DataGridView:

<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Con esto se agregará una columna con el encabezado # y que contendrá el numero de renglón de cada DataRow.

Implementar una caja de texto y un calendario en una página web

Para implementar la funcionalidad de una caja de texto y la selección de la fecha con un control de calendario se puede hacer de lo siguiente:

• Crear la caja de texto y el control de calendario en la forma y asignarles el atributo ClientInstanceName para poder nombrarlos con javascript en el lado del cliente.
• Agregar el atributo ClientVisible al control de calendario y ponerlo en false para que no esté visible en el cliente.
• Agregar el evento GotFocus a la caja de texto .
• Agregar el evento OnSelectionChanged para el control de calendario.

El markup de estos controles debe quedar así:

<dx:ASPxTextBox ID="txtRequiredDate" runat="server" Width="170px" ClientInstanceName="txtRequiredDate">
     <ClientSideEvents GotFocus="OnGotFocus" />
</dx:ASPxTextBox>

<dx:ASPxCalendar ID="calRequiredDate" runat="server" ClientInstanceName="calRequiredDate" ClientVisible="false">
     <ClientSideEvents SelectionChanged="OnSelectionChanged" />
</dx:ASPxCalendar>

• Luego hay que agregar el código javascript necesario para mostrar el calendario, para obtener la fecha y ponerla en la caja de texto y para volver a esconderlo. Esto debe quedar de la siguiente manera:

<script language="javascript" type="text/javascript">

    function OnGotFocus(s, e) {

        calRequiredDate.SetVisible(true);

    }

    function OnClick(s, e) {

        calRequiredDate.SetVisible(false);

    }

    function OnSelectionChanged() {

        var date = calRequiredDate.GetSelectedDate();

        txtRequiredDate.SetText(date.toDateString());

        calRequiredDate.SetVisible(false);

    }

</script>