21 septiembre 2007

Mostrando datos en el componente StringGrid

Anteriormente vimos como mostrar información en un componente ListView llegando incluso a cambiar el color de filas y columnas a nuestro antojo. El único inconveniente estaba en que no se podían cambiar los títulos de las columnas, ya que venían predeterminadas por los colores de Windows.

Pues bien, el componente de la clase TStringGrid es algo más cutre que el ListView, pero permite cambiar al 100% el formato de todas las celdas. Veamos primero como meter información en el mismo. Al igual que ocurría con el ListView, todos las celdas de un componente StringGrid son de tipo string, siendo nosotros los que le tenemos que dar formato a mano.

AÑADIENDO DATOS A LA REJILLA

Vamos a crear una rejilla de datos con las siguiente columnas:

NOMBRE, APELLIDO1, APELLIDO2, NIF, IMPORTE PTE.

Cuando insertamos un componente StringGrid en el formulario nos va a poner por defecto la primera columna con celdas fijas (fixed). Vamos a fijar las siguientes propiedades:

Propiedad Valor Descripción
--------- ----- -----------
ColCount 5 5 columnas
RowCount 4 4 filas
FixedCols 0 0 columnas fijas
FixedRows 1 1 fila fija
DefaultRowHeight 20 altura de las filas a 20 pixels

Ahora creamos un procedimiento para completar de datos la rejilla:

procedure TFormulario.RellenarTabla;
begin
with StringGrid do
begin
// Título de las columnas
Cells[0, 0] := 'NOMBRE';
Cells[1, 0] := 'APELLIDO1';
Cells[2, 0] := 'APELLIDO2';
Cells[3, 0] := 'NIF';
Cells[4, 0] := 'IMPORTE PTE.';

// Datos
Cells[0, 1] := 'PABLO';
Cells[1, 1] := 'GARCIA';
Cells[2, 1] := 'MARTINEZ';
Cells[3, 1] := '67348321D';
Cells[4, 1] := '1500,36';

// Datos
Cells[0, 2] := 'MARIA';
Cells[1, 2] := 'SANCHEZ';
Cells[2, 2] := 'PALAZON';
Cells[3, 2] := '44878234A';
Cells[4, 2] := '635,21';

// Datos
Cells[0, 3] := 'CARMEN';
Cells[1, 3] := 'PEREZ';
Cells[2, 3] := 'GUILLEN';
Cells[3, 3] := '76892693L';
Cells[4, 3] := '211,66';
end;
end;

Al ejecutar el programa puede apreciarse lo mal que quedan los datos en pantalla, sobre todo la columna del importe pendiente:


DANDO FORMATO A LAS CELDAS DE UN COMPONENTE STRINGGRIND

Lo que vamos a hacer a continuación es lo siguiente:

- La primera fila fija va a ser de color de fondo azul oscuro con fuente blanca y además el texto va a ir centrado.

- La columna del importe pendiente va a tener la fuente de color verde y va a ir alineada a la derecha.

- El resto de columnas tendrán el color de fondo blanco y el texto en negro.

Todo esto hay que hacerlo en el evento OnDrawCell del componente StringGrid:

procedure TFormulario.StringGridDrawCell( Sender: TObject; ACol,
ARow: Integer; Rect: TRect; State: TGridDrawState );
var
sTexto: String; // Texto que va a imprimir en la celda actual
Alineacion: TAlignment; // Alineación que le vamos a dar al texto
iAnchoTexto: Integer; // Ancho del texto a imprimir en pixels
begin
with StringGrid.Canvas do
begin
// Lo primero es coger la fuente por defecto que le hemos asignado al componente
Font.Name := StringGrid.Font.Name;
Font.Size := StringGrid.Font.Size;

if ARow = 0 then
Alineacion := taCenter
else
// Si es la columna del importe pendiente alineamos el texto a la derecha
if ACol = 4 then
Alineacion := taRightJustify
else
Alineacion := taLeftJustify;

// ¿Es una celda fija de sólo lectura?
if gdFixed in State then
begin
Brush.Color := clNavy; // le ponemos azul de fondo
Font.Color := clWhite; // fuente blanca
Font.Style := [fsBold]; // y negrita
end
else
begin
// ¿Esta enfocada la celda?
if gdFocused in State then
begin
Brush.Color := clRed; // fondo rojo
Font.Color := clWhite; // fuente blanca
Font.Style := [fsBold]; // y negrita
end
else
begin
// Para el resto de celdas el fondo lo ponemos blanco
Brush.Color := clWindow;

// ¿Es la columna del importe pendiente?
if ACol = 4 then
begin
Font.Color := clGreen; // la pintamos de azul
Font.Style := [fsBold]; // y negrita
Alineacion := taRightJustify;
end
else
begin
Font.Color := clBlack;
Font.Style := [];
end;
end;
end;

sTexto := StringGrid.Cells[ACol,ARow];
FillRect( Rect );
iAnchoTexto := TextWidth( sTexto );

case Alineacion of
taLeftJustify: TextOut( Rect.Left + 5, Rect.Top + 2, sTexto );
taCenter: TextOut( Rect.Left + ( ( Rect.Right - Rect.Left ) - iAnchoTexto ) div 2, Rect.Top + 2, sTexto );
taRightJustify: TextOut( Rect.Right - iAnchoTexto - 2, Rect.Top + 2, sTexto );
end;
end;
end;

Así quedaría al ejecutarlo:


Sólo hay un pequeño inconveniente y es que la rejilla primero se pinta de manera normal y luego nosotros volvemos a pintarla encima con el evento OnDrawCell con lo cual hace el proceso dos veces. Si queremos que sólo se haga una vez hay que poner a False la propiedad DefaultDrawing. Quedaría de la siguiente manera:


Por lo demás creo que este componente que puede sernos muy útil para mostrar datos por pantalla en formato de sólo lectura. En formato de escritura es algo flojo porque habría que controlar que tipos de datos puede escribir el usuario según en que columnas esté.

Pruebas realizadas en Delphi 7.

Publicidad