How to Change Coloring in the TDBGrid Component

Colors
Carlos Cossio/Moment/Getty Images

Adding color to your database grids will enhance the appearance and differentiate the importance of certain rows or columns within the database.

Since the DBGrid is a great user interface tool for displaying data, this article will focus on questions like "How do I change the color of particular row / column / cell in a DBGrid?"

Preparations

This article assumes that you know how to connect a database to DBGrid component.

The easiest way to accomplish this is to use the Database Form Wizard.

Select the employee.db from DBDemos alias. Select all fields except EmpNo.

Note: if you do not wont to work with the BDE, consider the chapters of the Free Database Course For Beginner Delphi Developers - Focus on ADO.

Coloring Columns

The first (and the easiest) thing you can do, to visually enhance the user interface, is to color individual column in the data-aware grid.

We will accomplish this through TColumns property of the grid. Select the grid component in the form and invoke the Columns editor by double clicking on the grid's Columns property in the Object Inspector. For more information on Columns editor look for "Columns editor: creating persistent columns" in your Delphi help files.

Now, everything you have to do is to specify the background color of the cells of the particular column. For text foreground color, see the font property.

Coloring Rows

If you want to color the selected row in a DBGrid but you don't want to use the dgRowSelect option because you want to be able to edit the data you should use the DBGrid.OnDrawColumnCell event.

This technique demonstrates how to dynamically change the color of text in a DBGrid:

procedure TForm1.DBGrid1DrawColumnCell
   (Sender: TObject; const Rect: TRect;
    DataCol: Integer; Column: TColumn;
    State: TGridDrawState);
begin
if Table1.FieldByName('Salary').AsCurrency>36000 then
  DBGrid1.Canvas.Font.Color:=clMaroon;
DBGrid1.DefaultDrawColumnCell
  (Rect, DataCol, Column, State);
end;

Next technique demonstrates how to dynamically change the color of row in a DBGrid:

procedure TForm1.DBGrid1DrawColumnCell
   (Sender: TObject; const Rect: TRect;
    DataCol: Integer; Column: TColumn;
    State: TGridDrawState);
begin
if Table1.FieldByName('Salary').AsCurrency>36000 then
  DBGrid1.Canvas.Brush.Color:=clWhite;
DBGrid1.DefaultDrawColumnCell
  (Rect, DataCol, Column, State);
end;

Coloring Cells

And finally: if you want to change the background color of the cells of the particular column (+ text foreground color), this is what you have to do:

procedure TForm1.DBGrid1DrawColumnCell
   (Sender: TObject; const Rect: TRect;
    DataCol: Integer; Column: TColumn;
    State: TGridDrawState);
begin
if Table1.FieldByName('Salary').AsCurrency>40000 then
begin
   DBGrid1.Canvas.Font.Color:=clWhite;
   DBGrid1.Canvas.Brush.Color:=clBlack;
end;
if DataCol = 4 then //4 th column is 'Salary'
  DBGrid1.DefaultDrawColumnCell
    (Rect, DataCol, Column, State);
end;

If an employee's salary is greater than 40 thousand, its Salary cell is displayed in Black and text is displayed in White.

Conclusion

Techniques described in this article can really distinguish you from others, but be careful: too much coloring is too much.