Google
 

Sunday, October 28, 2007

How to enhance the functionality of a TDBgrid component using colors

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.

Object Inspector Columns editor

This is what I have done, after few clicks... You have to agree that this is much better that the standard black'n'white grid (of course, use colors if you really need them).

Form - coloring columns

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;
If an employee's salary is greater than 36 thousand, its row is displayed in Maroon colored text.

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;
If an employee's salary is greater than 36 thousand, its row is displayed in White.

Form - coloring rows

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... Now, when I look, there are far too much colors in these examples.

How about graphics?

Image in a TDBGrid cell

component has many nice features and is more powerful than you would have thought. The "standard" DBGrid does its job of displaying and manipulating records from a dataset in a tabular grid. However, there are many ways (and reasons) why you should consider customizing the output of a DBGrid...

No comments: