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.