The Delphi Column 


Unlike the TDBGrid object, which displays each record in a single row, TDBCtrlGrid displays the records in a free-form layout. Each record is displayed on its own panel. You design only one panel at design time and at run-time, the DBCtrlGrid replicates that panel for each record displayed.

At runtime, you can use a database navigator (TDBNavigator) to move through the records, and to insert, delete, and edit the data.

The DBCtrlGrid has a few properties worth mentioning. You use the Orientation property to determine where the scrollbar is to be placed. You use PanelWidth and PanelHeight to set the width and height of a cell in the grid. The RowCount property determines how many records to show at one time.

The DBCtrlGrid component has one event, OnPaintPanel. This event is fired each time a grid cell needs painting. You can respond to this event in order to draw on the background of the panel.

Example with a SQLite database "geo.sqlite", an FDConnection, an FDQuery, a DataSource, a DBNavigator and a DBCtrlGrid:

1. Preparations:

  • If you haven't done so already, create a new folder \DelphiLand.
  • If you haven't done so already, create directory DBCtrlGrid "under" \DelphiLand.
  • Next, download and unzip it to this directory.

2. Start Delphi and start a new project: menu File > New > VCL Forms Application.

3. In the Object Inspector:

- set property Connected of FDConnection1 to False;
- set property LoginPrompt of FDConnection1 to False;
- set property Connection of FDQuery1 to FDConnection1;
- set the DataSet of DataSource1 to FDQuery1;
- set the DataSource of DBNavigator1 to DataSource1;
- set the DataSource of DBCtrlGrid1 to DataSource1.

4. Drop 5 DBEdit controls on the first panel of the DBCtrlGrid. Set their property DataSource to DataSource1.
Set their Datafield property to the various fields of database geo.sqlite: name, code, population, currency, curcode.

5. Drop a DBMemo on the first panel of the DBCtrlGrid.
Set its property DataSource to DataSource1.
Set its Datafield property to Notes.

6. Set a few properties of the DBCtrlGrid:

- set rowcount to 3;
- set SelectedColor to $00DDBC77 (or any color that's different from the color of the DBCtrlGrid). This will make it easier to identify the active panel at runtime.


Our source code is remarkably short:


{$R *.dfm}

procedure TForm1.FormShow(Sender: TObject);

procedure TForm1.FormDestroy(Sender: TObject);

At runtime, this gives:




Some data controls cannot be used with TDBCtrlGrid, e.g. TDBRadioGroup.

Database Tutorials  FAQ  Crash Course Delphi  Tips  Source Code  Downloads  Links

Copyright 1999-2022