1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Drawing an image in a cell of a Delphi DBGrid
Here's how to place an image into a cell of a TDBGrid. Enrich the visual presentation of data in Delphi database applications.
 Join the Discussion
"Post your views, comments, questions and doubts to this article."
 Related Resources
• TDBGrid to the MAX
• Coloring DBGrid
• Graphics programming

Designed to enable a user to view and edit data in a tabular grid, the TDBGrid component provides various ways of customizing its appearance. With so flexible component, a Delphi developer can always find new ways to make data more attractive.

A picture is worth a thousand words
While adding colors to a DBGrid can produce some neat effects, if you really want to improve the visual representation of data in you applications, you might consider using images instead of the "boring" text.

Here's a colored DBGrid, result of the code in the "Coloring DBGrid" article.

Dynamically changing the colors in a DBGrid

What if you want to add some custom drawings (images) to a particular cell (for a particular data field) to provide even more attractive user interface:

Image in a TDBGrid cell

Images in DBGrid
Following the ideas set in the "Coloring DBGrid" article; let's see how to paint an image in a cell of a TDBGrid.

Here's how the OnDrawColumnCell event handler for the DBGrid1 component looks:

procedure TForm1.DBGrid1DrawColumnCell(
  Sender: TObject;
  const Rect: TRect;
  DataCol: Integer;
  Column: TColumn;
  State: TGridDrawState);
  bitmap : TBitmap;
  fixRect : TRect;
  bmpWidth : integer;

  imgIndex : integer;
  fixRect := Rect;

  // customizing the 'LastName' field
  if Column.Field = EmployeeTableLastName then
    //adding some logic to grab the required image
    if EmployeeTableSalary.Value > 50000 then
      imgIndex := 0
    else if EmployeeTableSalary.Value > 25000 then
      imgIndex := 1
      imgIndex := 2;

    bitmap := TBitmap.Create;
      //grab the image from the ImageList 
      //(using the "Salary" field's value)
      //Fix the bitmap dimensions
      bmpWidth := (Rect.Bottom - Rect.Top);
      fixRect.Right := Rect.Left + bmpWidth;
      //draw the bitmap

    // reset the output rectangle, 
    // add space for the graphics
    fixRect := Rect;
    fixRect.Left := fixRect.Left + bmpWidth;

  //draw default text (fixed position)

To "paint" the above DBGrid, I've used a TImageList (ImageList1) component ("Win32" component palette tab) to store some (dummy for this test) images. Three images are added, each used to reflect the value of an employees salary.

Images for DBGrid's cell

The DBGrid is displaying data from the "Employee" table of a "DBDemos" database. The dataset object is named "EmployeeTable", the fields are persisted using the Fields editor -> the TField object "connected" to the "LastName" field from the table is named "EmployeeTableLastName".

That's all folks. Can Delphi paint it? Yes, Delphi can! ;)
Questions, comments? You already know: Delphi Programming Forum!

©2015 About.com. All rights reserved.