[DataGridView] - Uso del

DataGridViewComboBoxColumn

Introducción

Este articulo tendrá por objetivo mostrar como trabajar con las columnas 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 más 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 la 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 específica, que podrá seleccionarse entre las disponibles por el sistema.

Los pasos a seguir serán:

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

- y por último se cargará 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 Sub Form1_Load(sender As Object, e As EventArgs)
'
' Asigno los datos del combo de marcas
'
Dim comboboxColumn As DataGridViewComboBoxColumn =
TryCast(dataGridView1.Columns("Marca"), 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()

End Sub

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

?
1 public static List<MarcaEntity> GetAllMarca()
2 {
3 string sql = @"SELECT IdMarca
4 ,Descripcion
5
FROM Marcas";
6
7
8
List<MarcaEntity> list = new List<MarcaEntity>();
9
10 using (OleDbConnection conn = new
11 OleDbConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
12 {
13
14 OleDbCommand command = new OleDbCommand(sql, conn);
15
16 conn.Open();
17
18 OleDbDataReader reader = command.ExecuteReader();
19
20 while (reader.Read())
21 {
22 list.Add(LoadMarca(reader));
23
}
24
25
26 return list;
27 }
28}
29
30private static MarcaEntity LoadMarca(IDataReader reader)
31{
32 MarcaEntity marca = new MarcaEntity();
33
34 marca.IdMarca = Convert.ToInt32(reader["IdMarca"]);
35 marca.Descripcion = Convert.ToString(reader["Descripcion"]);

return marca;
}

?
public static List<ProductoEntity> GetAllProductos()
{
1 string sql = @"SELECT [IdProducto]
2 ,[IdMarca]
3
,[Descripcion]
4
5 ,[PrecioUnitario]
6 FROM Productos";
7
8 List<ProductoEntity> list = new List<ProductoEntity>();
9
10 using (OleDbConnection conn = new
11OleDbConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
12 {
13
14 OleDbCommand command = new OleDbCommand(sql, conn);
15
16 conn.Open();
17
18 OleDbDataReader reader = command.ExecuteReader();
19
20 while (reader.Read())
21
{
22
23 list.Add(LoadProducto(reader));
24 }
25
26 return list;
27 }
28
29
30}
31
32private static ProductoEntity LoadProducto(IDataReader reader)
33{
34 ProductoEntity producto = new ProductoEntity();
35
36 producto.IdProducto = Convert.ToInt32(reader["IdProducto"]);
37
38
producto.IdMarca = Convert.ToInt32(reader["IdMarca"]);
39
40
producto.Descripcion = Convert.ToString(reader["Descripcion"]);
41
42 producto.PrecioUnitario = Convert.ToDecimal(reader["PrecioUnitario"]);
43
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)
{
1 //
2 // Asigno los datos del combo de marcas
3 //
4 DataGridViewComboBoxColumn comboboxColumn = dataGridView1.Columns["Marca"]
5
as DataGridViewComboBoxColumn;
6
7
8
comboboxColumn.DataSource = ProductosDAL.GetAllMarca();
9 comboboxColumn.DisplayMember = "Descripcion";
10 comboboxColumn.ValueMember = "IdMarca";
11
12 //
13 // Asigno los datos del combo de descuentos
14 //
15 DataGridViewComboBoxColumn dgccomboDescuento =
16dataGridView1.Columns["Descuento"] as DataGridViewComboBoxColumn;
17
18 dgccomboDescuento.DataSource = ProductosDAL.GetAllDescuentos();
19 dgccomboDescuento.DisplayMember = "Descripcion";
20
dgccomboDescuento.ValueMember = "IdDescuento";
21
22
23 //
24 // bindeo los datos de los productos a la grilla
25 //
26 dataGridView1.AutoGenerateColumns = false;
27 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,
1
2
DataGridViewCellEventArgs e)
3 {
4
5 if (dataGridView1.Columns[e.ColumnIndex].Name == "Descuento")
6 {
7 //
8 // se obtiene el valor seleccionado en el combo
9 //
10 DataGridViewComboBoxCell combo =
11dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex] as DataGridViewComboBoxCell;
12
13 int idDescuento = Convert.ToInt32(combo.Value);
14
15
//
16
17
// se recupera por el id la info del descuento
18 //
19 DescuentoEntity descuento =
20ProductosDAL.GetDescuentosById(idDescuento);
21
22 //
23 // se calcula el descuento
24 //
25 DataGridViewCell cellPrecioUnitario =
26dataGridView1.Rows[e.RowIndex].Cells["Precio"];
27 DataGridViewCell cellPrecioFinal =
28
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]