[DataGridView] - Uso del DataGridViewComboBoxColumn

Introduccin

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

1- Definicin de las columnas en tiempo de diseo

Un paso importante es la definicin de las columnas para ello en este caso explicare
como hacerlo en tiempo de diseo y poder as controlar que datos visualizar.
La opcin para realizar esta operacin se encuentra haciendo click con el botn
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 opcin Add Column
visualizndose el siguiente cuadro:

Como se observa en la imagen, puede definirse informacin rpida del tipo de

columna que se quiere representar en la grilla.
- Editar columnas existentes, mediante la opcin 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 adems todo desde un entorno visual
La idea de estos dilogos es definir rpidamente las columnas mediante la opcin
de Add Column para luego pasar a la edicin 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 informacin 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 adems que la propiedad AutoGenerateColumns sea establecida en
false cuando se definan las columnas en tiempo de diseo, ya que en caso de no

hacerlo se aadir a la grilla las columnas generadas en runtime, lo cual no es

deseable en este caso.

2 Asignacin de los datos a la columna DataGridViewComboBoxColumn

Empezaremos por cargar la informacin 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, adems
cada producto pertenece a una marca especifica, que podr seleccionarse entre las
disponibles por el sistema.
Los pasos a seguir sern:
- se recuperara la columna que fue definida del tipo combobox a la cual se le
asignaran los datos a desplegar, en este caso sern las Marcas disponibles.
- y por ultimo se cargara la grilla con los datos de los Productos.
El formulario que visualizara ser el siguiente:

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

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

08.comboboxColumn.DataSource = ProductosDAL.GetAllMarca();
09.comboboxColumn.DisplayMember = "Descripcion";
10.comboboxColumn.ValueMember = "IdMarca";
11.
12.//
13.// bindeo los datos de los productos a la grilla
14.//
15.dataGridView1.AutoGenerateColumns = false;
16.dataGridView1.DataSource = ProductosDAL.GetAllProductos();
17.
18.}
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.
Adems se especifica la propiedad AutoGenerateColumns definiendo que solo las
columnas creadas en tiempo de diseo sern las visibles.
A continuacin se visualizara los mtodo utilizados para cargar los datos en el
DataGridView
01.public static List<MarcaEntity> GetAllMarca()
02.{
03.string sql = @"SELECT IdMarca
04.,Descripcion
05.FROM Marcas";
06.
07.List<MarcaEntity> list = new List<MarcaEntity>();
08.
09.using (OleDbConnection conn
= new OleDbConnection(ConfigurationManager.ConnectionStrings["default"]
.ToString()))
10.{
11.
12.OleDbCommand command = new OleDbCommand(sql, conn);
13.
14.conn.Open();
15.

16.OleDbDataReader reader = command.ExecuteReader();

17.
18.while (reader.Read())
19.{
20.list.Add(LoadMarca(reader));
21.}
22.
23.return list;
24.}
25.}
26.
27.private static MarcaEntity LoadMarca(IDataReader reader)
28.{
29.MarcaEntity marca = new MarcaEntity();
30.
31.marca.IdMarca = Convert.ToInt32(reader["IdMarca"]);
32.marca.Descripcion = Convert.ToString(reader["Descripcion"]);
33.
34.return marca;
35.}

01.public static List<ProductoEntity> GetAllProductos()

02.{
03.string sql = @"SELECT [IdProducto]
04.,[IdMarca]
05.,[Descripcion]
06.,[PrecioUnitario]
07.FROM Productos";
08.
09.List<ProductoEntity> list = new List<ProductoEntity>();
10.
11.using (OleDbConnection conn
= new 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(LoadProducto(reader));
23.}
24.
25.return list;
26.}
27.
28.
29.}
30.
31.private static ProductoEntity LoadProducto(IDataReader reader)
32.{
33.ProductoEntity producto = new ProductoEntity();
34.
35.producto.IdProducto = Convert.ToInt32(reader["IdProducto"]);
36.
37.producto.IdMarca = Convert.ToInt32(reader["IdMarca"]);
38.producto.Descripcion = Convert.ToString(reader["Descripcion"]);
39.
40.producto.PrecioUnitario =
Convert.ToDecimal(reader["PrecioUnitario"]);
41.
42.return producto;
43.}

[C#]

[VB.NET]

3 Realizar una operacin al cambiar la seleccin del combo

En este seccin 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,
segn el el valor seleccionado del combo se realizara una operacin con el mismo y
el valor calculado ser presentado en otra celda de la misma fila en donde se
visualiza la informacin del producto.
El formulario ahora tomara la siguiente forma

Adems 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 lnea para cargar los
tems de descuento
01.private void Form1_Load(object sender, EventArgs e)
02.{
03.//
04.// Asigno los datos del combo de marcas
05.//
06.DataGridViewComboBoxColumn comboboxColumn =
dataGridView1.Columns["Marca"] as DataGridViewComboBoxColumn;
07.
08.comboboxColumn.DataSource = ProductosDAL.GetAllMarca();
09.comboboxColumn.DisplayMember = "Descripcion";
10.comboboxColumn.ValueMember = "IdMarca";
11.

12.//
13.// Asigno los datos del combo de descuentos
14.//
15.DataGridViewComboBoxColumn dgccomboDescuento =
dataGridView1.Columns["Descuento"] as DataGridViewComboBoxColumn;
16.
17.dgccomboDescuento.DataSource = ProductosDAL.GetAllDescuentos();
18.dgccomboDescuento.DisplayMember = "Descripcion";
19.dgccomboDescuento.ValueMember = "IdDescuento";
20.
21.//
22.// bindeo los datos de los productos a la grilla
23.//
24.dataGridView1.AutoGenerateColumns = false;
25.dataGridView1.DataSource = ProductosDAL.GetAllProductos();
26.
27.}
Pero lo mas importante es ver como se trabaja con el combo, detectando un cambio
en el tem y realizando el calculo del descuento.
01.private void dataGridView1_CellValueChanged(object sender,
DataGridViewCellEventArgs e)
02.{
03.
04.if (dataGridView1.Columns[e.ColumnIndex].Name == "Descuento")
05.{
06.//
07.// se obtiene el valor seleccionado en el combo
08.//
09.DataGridViewComboBoxCell combo =
dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex] as DataGridViewComb
oBoxCell;
10.
11.int idDescuento = Convert.ToInt32(combo.Value);
12.
13.//
14.// se recupera por el id la info del descuento
15.//
16.DescuentoEntity descuento =
ProductosDAL.GetDescuentosById(idDescuento);
17.
18.//
19.// se calcula el descuento
20.//

21.DataGridViewCell cellPrecioUnitario =
dataGridView1.Rows[e.RowIndex].Cells["Precio"];
22.DataGridViewCell cellPrecioFinal =
dataGridView1.Rows[e.RowIndex].Cells["PrecioFinal"];
23.
24.decimal valordescontar = (descuento.Porcentaje *
Convert.ToDecimal(cellPrecioUnitario.Value)) / 100;
25.
26.cellPrecioFinal.Value = Convert.ToDecimal(cellPrecioUnitario.Value)
- valordescontar;
27.}
28.}
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 tambin puede disparase para la edicin de
otras celdas para las dems 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 informacin 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 ningn valor proveniente de la base de datos.

[C#]

[VB.NET]

Publicado por Leandro Tuttini en 10:55

Etiquetas: C#, DataGridView, VB.NET

Primeros Pasos: Enlazar un

DataGridView y TextBox
en C#
Posted on November 2, 2010

En este tutorial vamos a aprender a enlazar un DataGridView con los

TextBox, las herramientas que vamos a utilizar para este tutorial son las
siguientes:
Microsoft

Visual

Studio

Professional

Express,

Puedes

bajar

la versin Express Aqu.

Microsoft SQL Server Express, Descargarlo desde Aqu.
En este caso utilizaremos la versin 2010, pero este ejemplo tambin te
puede servir si tienes la versin 2008 o 2005 y el lenguaje ser C#.
Que vamos aprender en este Tutorial?
1.

Crear una base de datos en SQL Server.

2.

Crear una conexin a la base de datos.

3.

Enlazar un TextBox con un DataGridView.

Empecemos con el Tutorial:

Paso 1: Creamos un nuevo proyecto del tipo Windows Forms Application
y lo nombramos DataGridView

Paso 2: Creamos un nuevo Item o elemento.

Paso 3: Al agregar un nuevo item nos mostrara una pantalla como la que
veremos a continuacin y buscaremos Service-base-Database y damos
click en Add, con esto estaremos creando la base de datos.

Paso

4:

Seleccionaras

la opcin de

DataSet

oprimes

siguiente,

te aparecer un mensaje de que haz creado un nuevo dataset y das

finalizar.

Paso 5: Vamos al explorador de soluciones que se encuentra de lado

derecho y encontraremos que se ha agregado una nueva base de datos
la cual lleva el nombre de Database1.mdf , le damos doble click a la
base de datos y nos mostrara de lado izquierdo el Server Explorer donde
vamos a ver varias carpetas, vamos a dar un click derecho sobre la

carpeta de Tables o Tablas y seleccionamos la opcin de agregar nueva

tabla.

Paso 6: Vamos agregar los siguientes campos a nuestra tabla:

Id (int)

Nombre (varchar(50))

Telefono (int)

Direccion (varchar(50))

Email (varchar(50))

Una vez creados los campos, guardamos nuestra tabla con el nombre de
Empleados.

Paso 7: Ahora vamos a agregar algunos registros, en el Server Explorer

se agrego la tabla empleados, damos click derecho sobre la tabla y
seleccionamos la opcin de mostrar datos de la tabla o Show Table Data,
nos mostrara la tabla vaca proseguimos con agregar algunos registros.

Paso 8: Agregamos a nuestro formulario los siguientes controles:

1 DataGridView

6 Labels

5 TextBox

Nuestro Form deber quedar similar a la siguiente imagen.

Paso 9: !Vayamos al cdigo!

Lo

primero

que

vamos

hacer

es

importar

el

namespace: using System.Data.SqlClient.

En la seccin de form_load agregaremos las siguientes lineas de cdigo.

BindingSource bindingsource1 = new BindingSource();

SqlDataAdapter dataAdapter = new SqlDataAdapter();

La primer linea nos servira como enlace de los datos de la tabla con el
datagridview
La segunda linea nos permitira poder unir nuestra consulta y la conexion.
Hasta Aqu debemos tener algo similar a esto:

Posteriormente vamos a copiar la ruta o path de nuestra base de datos,

vamos a nuestro explorador de soluciones y seleccionamos nuestra base
de datos Database1.mdf para ver las propiedades de la base de datos,
una vez ya en las propiedades buscaremos la propiedad Full Path o
Ruta de Acceso, seleccionamos toda la ruta y copiamos.

Volvemos al cdigo y comenzamos a crear la conexin.

String

datasource=@Data

Source=.\SQLEXPRESS;AttachDbFilename=Aqu va la ruta
que copiamos anteriormente;Integrated Security=True;User
Instance=True;

//Aqu estamos definiendo la ruta de

nuestra base de datos

dataAdapter
Empleados,

new

SqlDataAdapter(Select

datasource);

nuestra base de datos

SqlCommandBuilder

//Enlazamos

la

comando

SqlCommandBuilder(dataAdapter);

from

consulta
=

con
new

//Generamos

un

comando para asociarlo con nuestro dataAdapter

DataTable tabla = new DataTable();// Creamos un objeto

DataTable
dataAdapter.Fill(tabla);//Llenamos nuestro dataAdapter con

los campos de nuestra tabla

bindingsource1.DataSource = tabla;//Asignamos la fuente

de datos de nuestro bindingsource

dataGridView1.DataSource
=

asignamos el datasource a nuestro DataGridView

textBox1.DataBindings.Add(Text,
bindingsource1,
Id);//Enlazamos

nuestros

campos

bindingsource1;//Le

de

texto

con

el

bindingsource y sus respectivos campos.

textBox2.DataBindings.Add(Text,

bindingsource1,

Nombre);
textBox3.DataBindings.Add(Text,

bindingsource1,

Telefono);
textBox4.DataBindings.Add(Text,

bindingsource1,

Direccion);
textBox5.DataBindings.Add(Text,

bindingsource1,

Email);
Al terminar tendremos un cdigo como se muestra en la siguiente
imagen.

Ahora solo ejecutamos nuestro proyecto y listo, tenemos nuestro

DataGridView enlazado con los Textbox, como resultado tendremos que
al

seleccionar

un

registro

en

el

DataGridView

texto tendrn el valor del registro seleccionado.

Espero y les pueda servir este tutorial :)

los

campos

de