Cómo hacer un FlexGrid editable (o que lo parezca)

En primer lugar, podemos cambiar los contenidos de un FlexGrid mediante la propiedad Text de una celda cualquiera. Es decir, no situamos en la fila y columna en cuestión y damos un valor.

Lo que queremos aquí es que parezca que escribimos directamente sobre el FlexGrid, de la misma manera que se escribiría en un DataGrid o en una Hoja de Cálculo, por ejemplo. ¿Aplicaciones? Bueno, principalmente siempre que queramos escribir en una tabla, por ejemplo en programas de gestión cuando creamos o modificamos una factura. Sí, ya se que se puede hacer con el DataGrid pero personalmente prefiero:

1. Crear un formulario con un FlexGrid y diferentes TextBox para contener los datos de la factura.
2. Cargar los datos de la factura en el formulario cuando se abre la factura.
3. Realizar los cambios en la factura.
4. Con el botón de "Aceptar", guardar los cambios y con el de "Cancelar" no hacer nada.

De ésta manera controlo perfectamente todos los pasos y grabo cuando quiero, mediante un command de ADO, o como sea. Prefiero esto a tener un DataGrid para las líneas de factura y tener que manejar sus eventos, etc.

O sea, es lo de siempre, cargar los datos en variables (TextBox y FlexGrid), modificar los datos y grabar (o no).

Si observáis en algunas aplicaciones se utiliza otro método mas sencillo: se escriben los datos de la línea en diferentes TextBox situados en la pantalla y, cuando se hace "Validar línea" o algo parecido, la línea se añade a un FlexGrid que esta debajo. También me parece una buena forma pero... ¿no es más bonito que parezca que escribimos directamente sobre el FlexGrid? En fin, dejo de enrollarme y vamos al tema. Veréis que el código es cortito y ¡además funciona!

En primer lugar en el Load del formulario definimos las columnas del Flex y ponemos el TextBox de edición (txtFlex) con el borde a 0 (para que sobre el Flex no se note) y lo hacemos invisible. El color de fondo y el tipo de letra de txtFlex lo he seleccionado en tiempo de diseño, como podréis ver en el zip.

Después encontramos el siguiente procedimiento de evento:

Private Sub MSFlexGrid1_GotFocus()
   If txtFlex.Visible = False Then Exit Sub
   MSFlexGrid1.Text = txtFlex.Text
   txtFlex.Visible = False
End Sub

O sea que si el txtFlex está visible (estamos editando) actualizar la celda correspondiente del Flex con el valor que hayamos introducido y hacer invisible el txtFlex. Esto sucede cuando abandonamos el TextBox de edición, entonces el Flex pasa a tener el foco y se actualiza. ¿Cómo abandonamos el TextBox?. Cuando lleguemos al evento txtFlex_KeyDown lo veréis.

El siguiente procedimiento es el evento MSFlexGrid1_KeyPress. Es decir, cuando pulsamos una tecla sobre el Flex iniciamos la edición y ¿que tiene que suceder? Pues ajustamos el tamaño y la posición del txtFlex al de la celda correspondiente del Flex. Después si pulsamos el espacio quiere decir que estamos añadiendo caracteres al contenido actual de la celda. Si pulsamos otra tecla "machacamos" el contenido que haya en la celda sustituyéndolo por esa tecla. Finalmente, cuando todo esta listo, hacemos visible el txtFlex y ¡voila!

Vale, ahora a por el próximo procedimiento: el MSFlexGrid1_LeaveCell. Es parecido al evento ya comentado MSFlexGrid1_GotFocus, o sea, sirve para actualizar el Flex cuando dejamos el txtFlex. ¿Por qué hace falta? El evento LeaveCell ocurre inmediatamente antes de que la celda activa actual cambie a una celda diferente. ¿Que pasa si estamos editando y clicamos con el ratón sobre otra parte del Flex? Pues que se produce el evento MSFlexGrid1_GotFocus anteriormente comentado pero el texto va a parar a la nueva celda que hemos clicado. Con este evento aseguramos que se actualiza el Flex en la celda correspondiente antes de pasar a la siguiente celda.

Bueno esto se acaba vamos a comentar el evento txtFlex_KeyDown. Aquí nos hemos hecho un pequeño controlador de teclado para el txtFlex, o sea que tomad nota para cuando entremos a fondo en el tema del teclado. Aquí vemos las acciones a realizar en cada tecla. En primer lugar fijaros que siempre ponemos MSFlexGrid1.SetFocus para asegurar que se produce el evento MSFlexGrid1_GotFocus, o sea, que se actualiza el Flex y se hace invisible el txtFlex, con lo que el da la impresión que realmente estamos editando el Flex. En el caso de la tecla ESC antes ponemos txtFlex.Visible = False para hacer invisible directamente el txtFlex y para que cuando se pase a MSFlexGrid1_GotFocus no se actualice nada. En cuanto a las teclas de dirección tenemos que añadir naturalmente el movimiento en el Flex. El DoEvents es para actualizar eventos en este caso el MSFlexGrid1_GotFocus antes de mover la celda.

En fin, una maravilla. Personalmente me encanta éste código. No es perfecto porqué si clicamos sobre el TextBox de Fecha, por ejemplo, se queda el txtFlex visible y el Flex no se actualiza. Todo se soluciona cuando volvemos a clicar sobre el Flex. A mi ya me gusta así...

Como colofón final y total fijaros en el ultimo procedimiento, que "elimina" el retorno de carro en el txtFlex para quitar esos horribles pitidos que se producen al hacer Enter sobre un TextBox. Naturalmente, esto se puede aplicar en cualquier programilla que hagáis...

Bien, hoy ha habido mucha letra. Espero que os hayan sido útiles éstas explicaciones.

¡Talueguín!

Bájate el zip con el ejemplo pulsando aquí.

Josep Gotarra      

josep@xubidu.com