[DataGridView] - Uso del DataGridViewComboBoxColumn

 

Introducción

---

Este articulo tendrá por objetivo mostrar como trabajar con las columna del tipo ComboBox que se encuentran dentro de una celda del datagridview.

 

1- Definición de las columnas en tiempo de diseño

---

Un paso importante es la definición de las columnas para ello en este caso explicare como hacerlo en tiempo de diseño y poder así controlar que datos visualizar.

La opción para realizar esta operación se encuentra haciendo click con el botón derecho del mouse en el control DataGridView del formulario, visualizando una lista de ítems como se muestran en la imagen

Aquí puede seleccionarse dos opciones:

- Agregar nuevas columnas a la grilla por medio de la opción “Add Column …” visualizándose el siguiente cuadro:

Como se observa en la imagen, puede definirse información rápida del tipo de columna que se quiere representar en la grilla.

- Editar columnas existentes, mediante la opción “Edit Columns…” visualizando un cuadro como el siguiente

Lo interesante de esto es que uno podrá controlar que visualizar, en que orden, formato, tipo de columna y además todo desde un entorno visual

La idea de estos diálogos es definir rápidamente las columnas mediante la opción de “Add Column…” para luego pasar a la edición mediante “Edit Columns…” y especificar propiedades que son importantes para que todo funcione.

Una de las propiedades importantes es DataPropertyName, esta es fundamental para indicar que campo del origen de datos será asignado a esa columna. Al momento de cargar la grilla el valor de esa propiedad será tomado del origen de datos y asea un DataTable, o List<>, o cualquier otro que sea asignado y se mapeará con la columna usando esta propiedad.

Sino se asigna información a la propiedad DataPropertyName ese campo no cargara datos alguno, lo cual puede ser interesante para campos calculados como veremos en ejemplo mas adelante.

Es importante además que la propiedad AutoGenerateColumns sea establecida en false cuando se definan las columnas en tiempo de diseño, ya que en caso de no hacerlo se añadirá a la grilla las columnas generadas en runtime, lo cual no es deseable en este caso.

 

2 – Asignación de los datos a la columna DataGridViewComboBoxColumn

---

Empezaremos por cargar la información en un ejemplo simple, en este solo se tendrá un único campo del tipo combobox en el columna del DataGridView.

En este caso se trata de una grilla de producto con sus precios unitarios, además cada producto pertenece a una marca especifica, que podrá seleccionarse entre las disponibles por el sistema.

Los pasos a seguir serán:

- se recuperara la columna que fue definida del tipo combobox a la cual se le asignaran los datos a desplegar, en este caso serán las Marcas disponibles.

- y por ultimo se cargara la grilla con los datos de los Productos.

El formulario que visualizaría será el siguiente:

La carga de los datos se ha realizado en el evento Load del formulario

private void Form1_Load(object sender, EventArgs e)
{
    //
    // Asigno los datos del combo de marcas
    //
    DataGridViewComboBoxColumn comboboxColumn = dataGridView1.Columns["Marca"] as DataGridViewComboBoxColumn;

    comboboxColumn.DataSource = ProductosDAL.GetAllMarca();
    comboboxColumn.DisplayMember = "Descripcion";
    comboboxColumn.ValueMember = "IdMarca";

    //
    // bindeo los datos de los productos a la grilla
    //
    dataGridView1.AutoGenerateColumns = false;
    dataGridView1.DataSource = ProductosDAL.GetAllProductos();

}

Es interesante notar que la primer parte se recupera la columna del DataGridView que define el combobox, la cual se programa como si se tratara de un combobox normal de .net, utilizando las propiedades DataSource, a la cual se le asignado el origen de datos con la lista de Marcas, el DisplayMember y ValueMember, para asignar que campo de la lista de Marcas será visible al usuario y cual será el id de cada ítem listado.

El segunda parte carga los datos del DataGridView, tomando todos los producto a mostrar en la grilla.

Además se especifica la propiedad AutoGenerateColumns definiendo que solo las columnas creadas en tiempo de diseño serán las visibles.

A continuación se visualizara los método utilizados para cargar los datos en el DataGridView

public static List<MarcaEntity> GetAllMarca()
{
    string sql = @"SELECT IdMarca
                          ,Descripcion
                      FROM Marcas";

    List<MarcaEntity> list = new List<MarcaEntity>();

    using (OleDbConnection conn = new OleDbConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
    {

        OleDbCommand command = new OleDbCommand(sql, conn);

        conn.Open();

        OleDbDataReader reader = command.ExecuteReader();

        while (reader.Read())
        {
            list.Add(LoadMarca(reader));
        }

        return list;
    }
}

private static MarcaEntity LoadMarca(IDataReader reader)
{
    MarcaEntity marca = new MarcaEntity();

    marca.IdMarca = Convert.ToInt32(reader["IdMarca"]);
    marca.Descripcion = Convert.ToString(reader["Descripcion"]);

    return marca;
}

 

public static List<ProductoEntity> GetAllProductos()
{
    string sql = @"SELECT [IdProducto]
                          ,[IdMarca]
                          ,[Descripcion]
                          ,[PrecioUnitario]
                      FROM Productos";

    List<ProductoEntity> list = new List<ProductoEntity>();

    using (OleDbConnection conn = new OleDbConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
    {

        OleDbCommand command = new OleDbCommand(sql, conn);

        conn.Open();

        OleDbDataReader reader = command.ExecuteReader();

        while (reader.Read())
        {
            list.Add(LoadProducto(reader));
        }

        return list;
    }


}

private static ProductoEntity LoadProducto(IDataReader reader)
{
    ProductoEntity producto = new ProductoEntity();

    producto.IdProducto = Convert.ToInt32(reader["IdProducto"]);

    producto.IdMarca = Convert.ToInt32(reader["IdMarca"]);
    producto.Descripcion = Convert.ToString(reader["Descripcion"]);

    producto.PrecioUnitario = Convert.ToDecimal(reader["PrecioUnitario"]);

    return producto;
}

     

[C#]

[VB.NET]

 

3 – Realizar una operación al cambiar la selección del combo

---

En este sección se analizara como poder trabajar con un combobox que ha sido agregado a la grilla.

En este ejemplo se agrego un atributo nuevo al producto, referido a un descuento, según el el valor seleccionado del combo se realizara una operación con el mismo y el valor calculado será presentado en otra celda de la misma fila en donde se visualiza la información del producto.

El formulario ahora tomara la siguiente forma

Además si se analiza las propiedades de la nueva columna se podrá apreciar que la propiedad DataPropertyName se le ha especificado el nombre del campo de la tabla de productos, y es el mismo nombre de la propiedad en la clase ProductoEntity.

A diferencia el ejemplo anterior en este solo se agregaron las línea para cargar los ítems de descuento

private void Form1_Load(object sender, EventArgs e)
{
    //
    // Asigno los datos del combo de marcas
    //
    DataGridViewComboBoxColumn comboboxColumn = dataGridView1.Columns["Marca"] as DataGridViewComboBoxColumn;

    comboboxColumn.DataSource = ProductosDAL.GetAllMarca();
    comboboxColumn.DisplayMember = "Descripcion";
    comboboxColumn.ValueMember = "IdMarca";

    //
    // Asigno los datos del combo de descuentos
    //
    DataGridViewComboBoxColumn dgccomboDescuento = dataGridView1.Columns["Descuento"] as DataGridViewComboBoxColumn;

    dgccomboDescuento.DataSource = ProductosDAL.GetAllDescuentos();
    dgccomboDescuento.DisplayMember = "Descripcion";
    dgccomboDescuento.ValueMember = "IdDescuento";

    //
    // bindeo los datos de los productos a la grilla
    //
    dataGridView1.AutoGenerateColumns = false;
    dataGridView1.DataSource = ProductosDAL.GetAllProductos();

}

Pero lo mas importante es ver como se trabaja con el combo, detectando un cambio en el ítem y realizando el calculo del descuento.

private void dataGridView1_CellValueChanged(object sender, DataGridViewCellEventArgs e)
{

    if (dataGridView1.Columns[e.ColumnIndex].Name == "Descuento")
    {
        //
        // se obtiene el valor seleccionado en el combo
        //
        DataGridViewComboBoxCell combo = dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex] as DataGridViewComboBoxCell;

        int idDescuento = Convert.ToInt32(combo.Value);

        //
        // se recupera por el id la info del descuento
        //
        DescuentoEntity descuento = ProductosDAL.GetDescuentosById(idDescuento);

        //
        // se calcula el descuento
        //
        DataGridViewCell cellPrecioUnitario = dataGridView1.Rows[e.RowIndex].Cells["Precio"];
        DataGridViewCell cellPrecioFinal = dataGridView1.Rows[e.RowIndex].Cells["PrecioFinal"];

        decimal valordescontar = (descuento.Porcentaje * Convert.ToDecimal(cellPrecioUnitario.Value)) / 100;

        cellPrecioFinal.Value = Convert.ToDecimal(cellPrecioUnitario.Value) - valordescontar;
    }
}

En este caso se hizo uso del evento CellValueChange, y dentro de este se realizando las operaciones para trabajar con el valor seleccionado del combo.

- Primeramente se valida que siempre se trabaje con la columna que uno quiere operar, en este caso por el nombre se valida que sea la definida para el descuento. Debe recordarse que estos eventos también puede disparase para la edición de otras celdas para las demás columnas. Pero en este caso como el calculo solo interesa hacerlo en la columna de descuento es esta la verificada.

- Como segundo pasos se toma el id del descuento seleccionado en el combo, debe recordarse que al momento de cargar los ítems del combo, fueron los id los que se unieron a la propiedad ValueMember.

- Con el id del descuento se accede a la base de datos para recuperar la entidad del descuento  y con esta el valor del porcentaje que será usado en el calculo

- Por ultimo se recuperas la información de las celdas que restan y se procede a realizar el calculo del porcentaje que será desplegado en la ultima columna de la grilla.

Algo interesante a notar es que esta ultima columna que se hace llamar “Precio Final” no tiene valor alguno en la propiedad DataPropertyName, es por ello que no se carga ningún valor proveniente de la base de datos.

 

[C#]

[VB.NET]