Componentes GridView y TableView

GridView:
Exhibe datos en una rejilla (como una hoja de calculo)





TableView:
Un GridView mejorado ya que permite editar los datos que se muestren. Utilice el método del corregir; este método se debe llamar durante el evento click.


Propiedades importantes:
.Columns.Count: define el número de columnas que hay en la rejilla
.Rows.Count: define el número de filas que hay en el rejilla

.Columns.Width: define el ancho
.Rows[X].Height: define el alto que tendrá la fila X

.text:
Para poder asignar valores a las celdas de una rejilla, lo hacemos como si fuera un array de 2 dimensiones. Por ejemplo si tenemos un gridview, llamado RejillaDatosPersonales, vamos a asignarles valores:

RejillaDatosPersonales[0,0].text="Juan" ' asignamos a la celda "A1" (primera fila y primera columna en el margen izquierdo superior de la rejilla), el valor del texto "Juan".


También podemos asignar alineaciones e iconos:

RejillaDatosPersonales[0,0].Alignment = Align.Right 'el contenido lo pone justificado a la derecha
RejillaDatosPersonales[0,0].Picture=picture["persona.png"] ' asigna una imagen llamada "persona.png", que aparecerá en la celda A1.


Hay que tener en cuenta que el ancho y alto de la celda se verán modificados por las dimensiones de la imagen. Normalmente se añaden iconos que tengan las mismas dimensiones.


Puedes usar este programa que genera el código necesario para definir un gridview (y tableview).


Es muy frecuente usar Gridview para mostrar los resultados de consultas de bases de datos.
Veremos un ejemplo de uso del evento _data para rellenar los datos cuando estos son muchos ya que los presenta muy  rápidamente y es la forma óptima.

Edición de celdas:
Si queremos que el usuario pueda editar en la misma rejilla los datos, tenemos que usar el control TableView, que permite hacerlo.

Para ello usamos el método .Edit:

• Si lo usamos sin parámetros lo editamos con un textbox.
•  TableViewDatos.edit '---> editar en textbox
• Si le pasamos dos parámetros, uno un array de string y otro parametro que es un boolean para indicarle si es solo lectura (valor True) o se puede escribir (valor False) , nos aparece un combobox:
• TableViewDatos.edit(TablaOpciones, True) 

 y el evento _Save para guardar lo editado:

1. Public Sub TableViewDatos_Save(Row As Integer, Column As Integer, Value As String)
2.   'guardamos el valor cambiado en la celda
4.   TableViewDatos[row, column].Text = Value
6. End Sub

Ejemplo Gridviews y Tableviews:
En este ejemplo se definen un gridviews y un tableview, el tableview, podemos editarlo, en la primera columna nos aparecerá un combobox de solo lectura y en el resto de columna un textbox, donde podemos cambiar el texto

Código fuente:
-

-

Enlace de descarga: enlace en box.com


Otro Ejemplo:
Esta vez vamos a mostrar el resultado de una consulta de una base de datos, pero vamos a rellenar el gridview con el evento _data (que es mucho más eficiente que rellenarlo para resultados con muchas filas).

Mas concretamente, el programa crea una base de datos sqlite con una tabla con 10.000 registros y los muestras en un gridview.

Codigo:
-

-

Enlace de descarga: enlace a box.com

Nota:
Una mejora del código es poner en el evento data que se coloree la linea según sea par o impar:

1. Public Sub GridView1_Data(Row As Integer, Column As Integer)
3.   $res.moveTo(row)
4.   If row Mod 2 = 0 Then gridview1.Data.Background = Color.RGB(68, 186, 199)
5.   GridView1.Data.text = Str($res[GridView1.Columns[column].text])
7. End

Coloreando las filas según sea par o impar

Fuentes:
http://www.gambas-es.org/viewtopic.php?f=4&t=37&highlight=tableview
http://www.gambas-es.org información sobre el evento _data
http://kalaharix.wordpress.com/gambas/gridview-and-the-data-handling-event/

http://www.gambas-es.org/viewtopic.php?f=4&t=280&highlight=gridview1data
http://gambaswiki.org/wiki/comp/gb.qt4/gridview?l=es
http://gambaswiki.org/wiki/comp/gb.form/tableview