Skip to content

Instantly share code, notes, and snippets.

@flicardie
Last active March 28, 2023 21:07
Show Gist options
  • Save flicardie/5b38f2b4cb75a2fd33043141cb8dbb98 to your computer and use it in GitHub Desktop.
Save flicardie/5b38f2b4cb75a2fd33043141cb8dbb98 to your computer and use it in GitHub Desktop.
Ejemplo de uso XtraGridControl de DevExpress #DevExpress #Grid #XtraGridControl #CShapar

Ejemplo de uso de control XtraGrid de DevExpress

Ejemplo de uso del control, la mayoria de las operaciones se hacen a partir de la vista asociada al control

GridControl

Listado de ejemplos


Ejemplo para deshabilitar la edicción de una fila a partir de un valor especificado - Evento ShowingEditor del gridview

// Deshabilitar la edición
// How to Conditionally Prevent Editing for Individual Grid Cells
// https://www.devexpress.com/Support/Center/Question/Details/A249/how-to-conditionally-prevent-editing-for-individual-grid-cells

private void gridView1_ShowingEditor(object sender, System.ComponentModel.CancelEventArgs e) 
{

    GridView view = sender as GridView; 
    if(view.FocusedColumn.FieldName == "Region" && !USCanada(view, view.FocusedRowHandle))
    {
       e.Cancel = true;
    }
}

Ejemplo para detectar cambios en el valor de una celda - Evento EditValueChanging

/// <summary>
/// Procedimiento que se activa cuando ha cambiado el valor de un repository item
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void RepositoryItemEventoEditValueChanging(object sender, DevExpress.XtraEditors.Controls.ChangingEventArgs e)
{

    if (e.OldValue.ToString() != e.NewValue.ToString())
    {
        labelMensaje.Text = "Valor Anterior " + e.OldValue.ToString() + System.Environment.NewLine +
                        "Nuevo Valor" + e.NewValue.ToString();                   
    }
}

Ejemplo para cambiar el color de fondo de una fila

/// <summary>
/// Procedimiento que cambia el color de fondo de una fila del XtraGridControl
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void RepositoryItemEventoEditValueChanging(object sender, DevExpress.XtraEditors.Controls.ChangingEventArgs e)
{
    if (e.OldValue.ToString() != e.NewValue.ToString())
    {
        labelMensaje.Text = "Valor Anterior " + e.OldValue.ToString() + System.Environment.NewLine +
                        "Nuevo Valor" + e.NewValue.ToString();
        BaseEdit boton = (BaseEdit)sender;
        GridControl grid = (GridControl)boton.Parent;
        GridView view = (GridView)grid.FocusedView;

        filasQueHanCambiado.Add(view.FocusedRowHandle);
        view.RefreshRow(view.FocusedRowHandle);

        //view.Appearance.SelectedRow.BackColor = System.Drawing.Color.Red;
        //view.Appearance.SelectedRow.Options.UseBackColor = true;

        //view.OptionsSelection.EnableAppearanceFocusedRow = true;
        //view.OptionsSelection.EnableAppearanceFocusedCell = true;
        //view.Appearance.FocusedRow.Options.UseBackColor = true;
        //view.Appearance.FocusedRow.BackColor = System.Drawing.Color.Red;



        //view.OptionsSelection.EnableAppearanceHideSelection = true;
        //view.Appearance.HideSelectionRow.Options.UseBackColor = true;
        //view.Appearance.HideSelectionRow.BackColor = System.Drawing.Color.Red;

    }
}


List<int> filasQueHanCambiado = new List<int>();
      
/// <summary>
/// Evento que cambia el color de todas las filas
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void GridViewEventoRowStyle(object sender, RowStyleEventArgs e)
{
    //https://www.devexpress.com/Support/Center/Question/Details/Q288829
    //https://documentation.devexpress.com/#WindowsForms/DevExpressXtraGridViewsGridGridView_RowStyletopic

    // https://documentation.devexpress.com/#WindowsForms/CustomDocument758
    GridView view = (GridView)sender;

 
    if (e.RowHandle >= 0)
    {
        //string category = view.GetRowCellDisplayText(e.RowHandle, view.Columns["CodigoEspecialMostrar"]);
        if (filasQueHanCambiado.Contains(e.RowHandle))
        {
            e.Appearance.BackColor = Color.Red;
            //e.Appearance.BackColor2 = Color.SeaShell;
        }
    }

           

}
}

Ejemplo de Opciones mas utilizadas en el GridView

GridView view = (GridView)sender;

// Obtiene el valor a partir de la columna o FieldName que tiene el foco
view.GetFocusedRowCellValue(nombreColumna).ToString().Trim()
view.GetFocusedRowCellValue(nombreFieldName).ToString().Trim()

// Obtiene el valor a partir de la columna o FieldName que tiene el foco
view.GetFocusedRowCellDisplayText(nombreColumna).ToString().Trim()
view.GetFocusedRowCellDisplayText(nombreFieldName).ToString().Trim()

// Obtener el texto que se muestra en la celda que tiene el foco
view.GetFocusedDisplayText().ToString().Trim()

// Obtener el valor que se muestra en la celda que tiene el foco
view.GetFocusedValue().ToString().Trim()

// Obtener el campo FieldName de la celda que tiene el foco
 view.FocusedColumn.FieldName
 
// Obtener el valor de una fila en específico por nombre de columna o FieldName
view.GetRowCellDisplayText(rowHandDeLaFila,nombreColumaOfieldName).ToString().Trim()
view.GetRowCellValue(rowHandDeLaFila,nombreColumaOfieldName).ToString().Trim()


 //Obtener todos los valores de la fila si estan ligados a un DataSource
TipoDeDato variable = (TipoDeDato)view.GetFocusedRow();

// Obtener el valor por el nombre de la columna que tiene el foco
view.GetRowCellValue(view.FocusedRowHandle, nombreColumaOfieldName).ToString().Trim()
view.GetRowCellDisplayText(view.FocusedRowHandle,nombreColumaOfieldName).ToString().Trim()
 
// Opción para agrupar el GridView a partir de una columna
colNombreColumna.GroupIndex = 1;

// Opción para ocultar el groupPanel y expander todos los grupos
view.OptionsView.ShowGroupPanel = false;
view.ExpandAllGroups();

// Setear Datos de una columna o FieldName específico
view.SetRowCellValue(i, NombreColumna,true);
view.SetRowCellValue(i, NombreFieldName,true);


// Obtiene todos los filas visibles
view.RowCount;

// Obtiene todas las filas del gridview
view.DataRowCount;

// Redimensionar columnas 
view.BestFitColumns();;

// Redimensionar columnas y habilitación de barra horizontal
https://www.devexpress.com/Support/Center/Question/Details/T149277/how-to-best-fit-columns
// La opción OptionsView.ColumnAutoWidth = false hace que aparezca el scroll vertical, si eso no esta activado, cuando hay muchas columnas
// el método best fit no funciona y las columnas no se ven bien
view.OptionsView.ColumnAutoWidth = false;
view.BestFitColumns();

Ejemplo de control a utilizar

Se debe seleccionar el siguiente control

XtraGridControlSeleccion

Para definir columnas tal y como aparecen en la siguiente imagen, es necesario presionar el botón "Run Designer"

XtraGridControlRunDesigner

Lo anterior hará que nos aparezca la siguiente pantalla en donde es importante definir las siguientes propiedades:

  • Caption : Texto que aparecerá en los encabezados de las columnas
  • FieldName : En esta propiedad se define el nombre del campo a mostrar acorde a lo devuelto por la fuente de datos
  • Name : Necesario para identificar la columna

XtraGridControlDefinicionDeColumnasDeGrid

Existen algunas otras propiedades como las siguientes importantes en las columnas del grid:

  • OptionsColumn.AllowEdit : Cuando esta en TRUE permite la edición, en caso contrario el usuario no podrá editar ningun valor de la columna

Filtrado de valores en primera fila

En caso se desee poder filtrar valores en la primera fila del Grid tal y como aparece en la siguiente pantalla

XtraGridControlFiltrarEnPrimeraFila

Se deberá setear lo siguiente

XtraGridControlSeteoFiltroEnPrimeraFila

En caso se desee hacer por código se podrá hacer de la siguiente forma

gridViewHoraExtra.OptionsView.ShowAutoFilterRow = true;

Como Recorrer un Grid

// Chequea que 
if (gcQuincenasDisponiblesGrid.RowCount > 0)
{
     gcReporteAsignacionDeAzucar.DataSource = null;
     listaReporteAsignacionAzucar.Clear();
     splashScreenManager.ShowWaitForm();

     int codigoZafra = Convert.ToInt32(gcQuincenasDisponiblesGrid.GetFocusedRowCellValue("CodigoZafra").ToString());
    string fechaInicial = gcQuincenasDisponiblesGrid.GetFocusedRowCellValue("FechaInicial").ToString().Trim();
    
}

// A una celda de una columna específica se le crea un caja de texto editable, para hacer uso del editor arctivo se utiliza la siguiente propiedad
 if (!gcLiquidacionFinalCañaGrid.ActiveEditor.Text.Equals("")) valor = Convert.ToDecimal(gcLiquidacionFinalCañaGrid.ActiveEditor.Text);
 
 // Recorrer un grid
 
int Lineas = 0;
Lineas = gridPrincipal.RowCount;
 
for (int i = 0; i < gridPrincipal.RowCount; i++)
{
   /***************************************************+
    * 0 = Id
    * 1 = No Marchamo
   **************************************************/

   //-- Add rows to the data table
   controlMarchamoTable.Rows.Add
   (
      LI  // Id
     , Convert.ToString(gridPrincipal.GetRowCellValue(i, "NumeroMarchamo")) // No Marchamo
     , Convert.ToString(gridPrincipal.GetRowCellValue(i, "NoSaco")) // No Saco
   );
}

Ejemplo de Carga de datos al Grid

private void btnCargarLista_Click(object sender, EventArgs e)
{
    // Lo de la linea 4 deberá de estar como una variable global
    //private IList<IngresoBodegaBE> listaIngresoBodega = new List<IngresoBodegaBE>();
      
    string _error = string.Empty;

     // Validación Detalle
    Utilidades.ChequeaErrores(txtMarchamo, ref _error, "Ingrese un marchamo.");
  
    if (_error.Equals(""))
    {
        IngresoBodegaBE _jumboAIngresar = new IngresoBodegaBE();

        _jumboAIngresar.NumeroMarchamo = txtMarchamo.Text;
        _jumboAIngresar.NoSaco = txtNoSaco.Text;
        _jumboAIngresar.Estiba = txtEstiba.Text;
        _jumboAIngresar.Fila = txtFila.Text;
        _jumboAIngresar.Nivel = txtNivel.Text;
        _jumboAIngresar.IdIngresoBodega = "0";
        _jumboAIngresar.Cantidad = _cantidad;

        // Esto hace que se agregue siempre al inicio de la lista
        listaIngresoBodega.Insert(0, _jumboAIngresar);

        gridDetalle.DataSource = null;
        gridDetalle.DataSource = listaIngresoBodega;
        
        gridViewDetalle.OptionsView.ColumnAutoWidth = false;
        gridViewDetalle.BestFitColumns();
        
        txtNoSaco.Text = "";
        txtMarchamo.Text = "";

        lbNumJumbosIngresados.Text = "Numero de Jumbos Ingresados : " + gridPrincipal.RowCount;
    }
    else
    {
        MessageBox.Show(_error);
    }
}

Ejemplo de eliminación de filas en el grid - Ideal cuando se agrega un botón y con este se quiere eliminar una fila del grid

/// <summary>
/// Elimina la fila seleccionada del XtraGridControl con un repositoryItemButton
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void EliminarElementoFila(object sender, DevExpress.XtraEditors.Controls.ButtonPressedEventArgs e)
{
           
   ButtonEdit boton = (ButtonEdit)sender;

   GridControl grid = (GridControl)boton.Parent;
   GridView view = (GridView)grid.FocusedView;
   view.DeleteRow(view.FocusedRowHandle);

}

Ejemplo para evaluar cada celda del Grid - Evento CustoRowCellEdit

/// <summary>
/// Evento que se ejecuta por cada celda, en el mismo se puede evaluar lo siguiente CellValue, Column, RepositoryItem, RowHandle
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void CustomRowCellEdit(object sender, CustomRowCellEditEventArgs e)
{
    try
            {
                if (e.Column != gridEliminarAsistencia) return; // Columna a la cual no se le aplicará el cambio

                if (e.RowHandle >= 0)
                {
                    GridView view = sender as GridView;
                    if (view.DataRowCount > 0 && view.FocusedRowHandle >= 0)
                    {

                        Boolean pagado = Convert.ToBoolean(view.GetRowCellValue(e.RowHandle, gridColRegistroPagado));

                        if (pagado == true)
                        {
                            RepositoryItem emptyEditor = new RepositoryItem();
                            e.RepositoryItem = emptyEditor;
                        }
                        else
                        {
                            e.RepositoryItem = repositoryItemButtonEliminarAsistencia;
                        }
                        
                    }
                }
            }
            catch (Exception ex)
            {
                Utilidades
                          .MostrarMensajeAUsuario(this,
                          "Error", ex.GetBaseException().Message
                          , Utilidades.BotonesMensajeDeUsuario.OK)
                          .ShowDialog();

            }
    
    // Otro Ejemplo
    
    if (e.Column.FieldName != "acciones") return;

            GridView view = sender as GridView;
            if (view.DataRowCount > 0 && view.FocusedRowHandle >= 0)
            {
                string id = view.GetRowCellValue(e.RowHandle, view.Columns["CodigoEmpleadoEstado"]).ToString();
                if (id.Trim() == "" || id == "0")
                {
                    e.RepositoryItem = repositoryItemEliminarEstado;
                }
                else
                {
                    RepositoryItem emptyEditor = new RepositoryItem();
                    e.RepositoryItem = emptyEditor;
                }
            }
}

Ejemplo de aplicación de agrupaciones y sumatorias en columnas visualmente

Para lograr lo siguiente:

XtraGridControlAplicarAgrupacionesYTotales

Aplicar Agrupaciones

Primero es necesario agrupar los resultados a partir de una columna, para el ejemplo se esta agrupando por Empleado y se hace de esta forma, normalmente la propiedad GroupIndex esta con -1, entonces para que se pueda agrupagar hay empezar con 0, en caso se desee agrupar por otras columnas colocar 1,2,3 etc

XtraGridControlColumnaAgrupada

Asi se hace en código

switch (tipoDePoliza)
{
    case (int)TipoPoliza.MovimientosDeNomina:

        gridViewDistribucionDeCostos.BeginSort();

        this.gridViewDistribucionDeCostos.SortInfo.ClearAndAddRange(
            new GridColumnSortInfo[]
            {
                // Primera Agrupación por Finca
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{gridColFinca,}
                    , new []{ColumnSortOrder.Ascending,}
                ),

                // Segunda Agrupación por Clave
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{gridColLote,gridColClave,gridColObjetoSAP,}
                    , new []{ColumnSortOrder.Ascending,ColumnSortOrder.Ascending,ColumnSortOrder.Ascending,}
                ),
                // Tercera Agrupación por Cuenta Contable
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{ gridColCuentaContable, gridColNombreCuentaContable}
                    , new []{ColumnSortOrder.Ascending,ColumnSortOrder.Ascending}
                )

        });

        gridViewDistribucionDeCostos.EndSort();


        gridColFinca.GroupIndex = 0;
        gridColLote.GroupIndex = 1;
        gridColClave.GroupIndex = 1;
        gridColObjetoSAP.GroupIndex = 1;
        gridColCuentaContable.GroupIndex = 2;
        gridColNombreCuentaContable.GroupIndex = 2;


        break;
    case (int)TipoPoliza.IGSS:


        gridViewDistribucionDeCostos.BeginSort();

        this.gridViewDistribucionDeCostos.SortInfo.ClearAndAddRange(
            new GridColumnSortInfo[]
            {
                // Primera Agrupación por Cuenta Contable
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{ gridColCuentaContable, gridColNombreCuentaContable }
                    , new []{ColumnSortOrder.Ascending, ColumnSortOrder.Ascending }
                ),

                // Segunda Agrupación por Finca
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{ gridColFinca}
                    , new []{ColumnSortOrder.Ascending}
                ),
                // Tercera Agrupación por  Lote, Clave y Objeto SAP
                new GridMergedColumnSortInfo
                (
                        new GridColumn[]{ gridColLote, gridColClave , gridColObjetoSAP }
                    , new []{ColumnSortOrder.Ascending,ColumnSortOrder.Ascending, ColumnSortOrder.Ascending }
                )

        });


        gridViewDistribucionDeCostos.EndSort();

        gridColCuentaContable.GroupIndex = 0;
        gridColNombreCuentaContable.GroupIndex = 0;

        gridColFinca.GroupIndex = 1;
        gridColLote.GroupIndex = 2;
        gridColClave.GroupIndex = 2;
        gridColObjetoSAP.GroupIndex = 2;


        break;
    case (int)TipoPoliza.NotaDeDebito:

        break;
    default:
        break;
}

Aplicar Totales

Para poder aplicar totales, es necesario setear la propiedad SummaryItem y las 2 subpropiedades interesantes son las siguientes:

  • DisplayFormat : En donde se aplica el formato del número a mostrar, por Ejemplo puede tener este valor {0:Q #,#.00;#,#.00;''} o el siguiente Total = {0:#,#.00;#,#.00;''}
  • SummaryType : Indica que tipo de agrupación se hará, los valores pueden ser (Sum|Min|Max|Count|Average|Custom)

XtraGridControlColumnaTotales

Ejemplo de Ajuste de Columnas en Grid

Ejemplo para ajustar columnas automáticamente en Grid

gridViewDetalle.OptionsView.ColumnAutoWidth = false;
gridViewDetalle.BestFitColumns();

Ejemplo de uso de control CheckEdit en Grid de DevExpress

Un control check edit en los grid se visualizará de la siguiente forma

RepositoryItemCheckEditEjemploEnGrid

Para agregar dicho control al grid será necesario irse al diseñador del control y agregar en una columna un nuevo repositori item tal y como lo demuestra la siguiente imagen

RepositoryItemCheckEditEjemploCreacion

Lo anterior hará que podamos hacer uso de check edit en cada fila


Leer estado de check edit en fila

Podremos hacer lo siguiente, suponiendo que la columna que aloja el checkedit tiene el campo FieldName = "Activo"

for (int i = 0; i < gridViewConceptosDePago.DataRowCount; i++)
{
    if (((bool)gridViewConceptosDePago.GetRowCellValue(i, "Activo")))
    {
    }
}

Setear estado de check edit en fila

Podremos hacer lo siguiente, suponiendo que la columna que aloja el checkedit tiene el campo FieldName = "Activo", esta opción es muy util para aplicar opciones como marcar o desmarcar todos

for (int i = 0; i < gridView.DataRowCount; i++)
{
    gridView.SetRowCellValue(i, "Activo", valorBooleano);
}

Ejemplo de agregado de un nuevo botón al grid

En caso desiemos agregar un botón al grid, tal y como se muestra en la siguiente imagen

GridControlBoton

Podemos hacer lo siguiente

GridRepositoryItemBoton

Ejemplo de navegación por teclado en GridControl DevExpress

Se usa el evento del GridView.KeyUp

GridViewEventoKeyUp

private void gridViewNominasGeneradas_KeyUp(object sender, KeyEventArgs e)
{
   //Ejecutar código
}

Ejemplo de grupos en grid

Ejemplo Para Expandir grupos

gridViewTraslado.ExpandAllGroups();

Ejemplo Para setear una columna como grupo en código

this.gridViewTraslado.GridControl = this.gridControlTrasladoHE;
this.gridViewTraslado.GroupCount = 2;
this.gridViewTraslado.Name = "gridViewTraslado";
this.gridViewTraslado.OptionsBehavior.Editable = false;
this.gridViewTraslado.OptionsView.ShowAutoFilterRow = true;
this.gridViewTraslado.OptionsView.ShowFooter = true;
this.gridViewTraslado.SortInfo.AddRange(new DevExpress.XtraGrid.Columns.GridColumnSortInfo[] {
     new DevExpress.XtraGrid.Columns.GridColumnSortInfo(this.gridNombreCompleto, DevExpress.Data.ColumnSortOrder.Ascending),
     new DevExpress.XtraGrid.Columns.GridColumnSortInfo(this.gridEstadoHoraExtra, DevExpress.Data.ColumnSortOrder.Ascending)
});

Ejemplo de sumarizaciones por código

 this.gridNoHoraExtra.Caption = "Cantidad de hora extra";
 this.gridNoHoraExtra.FieldName = "NoHoraExtra";
 this.gridNoHoraExtra.Name = "gridNoHoraExtra";
 this.gridNoHoraExtra.OptionsColumn.AllowEdit = false;
 this.gridNoHoraExtra.Summary.AddRange(new DevExpress.XtraGrid.GridSummaryItem[] {
     new DevExpress.XtraGrid.GridColumnSummaryItem(DevExpress.Data.SummaryItemType.Sum, "NoHoraExtra", "Total = {0:#,#.00;#,#.00;\'\'}")});
 this.gridNoHoraExtra.Visible = true;
 this.gridNoHoraExtra.VisibleIndex = 2;
this.gridNoHoraExtra.Width = 83;
@Renzo2017
Copy link

Excelente aportación.

@jcabrera001
Copy link

Genial, gracias.
Aunque la opción de agregar un CheckEdit no me funciona, se agradece.

@thepunkscript
Copy link

Muchas gracias ya tengo de donde empezar en el mundo de Dev saludos !

@JorgEdgardoDG
Copy link

Hola, muy buenos ejemplos. Realmente me aliviaron cierta dudas.
Pero, te presento algo muy curioso:
Cuando haces un summary en un campo con Format {0:c2} y que no hay en la columna valores alguno que tengan decimales, en el footer del Summary me aparecen valores con decimales. De hecho me hace pensar que o suma a través de logaritmos o la conversión de un decimal a moneda (c2) hace que ocurra esto que para mi es disparatado. NO PUEDE SER QUE VALORES SIN CENTAVOS LA SUMA TOTAL LO HAGA CON CENTAVOS.
Tambien exporte a excel solamente valores y la suma total me sigue dando con centavos.
¿ Qué raro ?
Te ha pasado alguna vez. Estoy hablando de más de 16.000 registros en un grid.
Bueno, éxitos en tu labor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment