Apúntate...


Consultas, desarrollo de programas y petición de presupuestos:

viernes, 11 de abril de 2014

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
  3.   TableViewDatos[row, column].Text = Value
  4. 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)
  2.   $res.moveTo(row)
  3.   If row Mod 2 = 0 Then gridview1.Data.Background = Color.RGB(68186199)
  4.   GridView1.Data.text = Str($res[GridView1.Columns[column].text])
  5. 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/

8 comentarios:

  1. ¿Como le haces para seleccionar de manera vertical?
    Quiero seleccionar un columna y no una fila como en el GridView del primer ejemplo

    ResponderEliminar
    Respuestas
    1. No se puede hacer, solo se pueden seleccionar filas (una o varias).

      Eliminar
    2. se pupede es seleccionar una celda, y dependiendo la posicion saber al columna, es todo..

      Eliminar
  2. ¿Como le haces para cambiar la posición de una fila o columna?
    Quisiera mover todo el contenido de una fila, una fila abajo, como en un ListBox, así
    ListBox1.Index = ListBox1.Index - 1
    pero aplicado al GridView

    ResponderEliminar
    Respuestas
    1. Primero tienes que aumentar una fila:
      Gridview1.rows.count +=1
      Luego, con un bucle for next tienes que mover todos los datos de la filas. He hecho el ejemplo completo en mi blog personal:
      http://jsbsan.blogspot.com.es/2014/10/gridview-insertando-fila-en-blanco.html

      Eliminar
  3. ¿Cómo se elimina la fila seleccionada de un TableView?

    ResponderEliminar
  4. Hola yo lo que necesito es hacer un programa para una pizzeria, como hago para que un listview me tome una base de datos y poder elegir productos y luego poder ver la factura? te agradeceria la ayuda, estoy re complicado

    ResponderEliminar
    Respuestas
    1. Hola Alejandro: te puedes poner en contacto, en el anuncio que tengo mas arriba (de fondo azul),y te doy presupuesto.

      Eliminar

A falta de donativos... un poco de publicidad