Using the Tab Control to Display Dataset Records

Dec 28, 2020
2 minutes to read

Follow the steps listed in this topic to create a simple application which uses the TcxTabControl control to display dataset records. Tabs that display values of the bound dataset field will be added to the control. Values of other fields will be displayed within the page.

Start a new application project.
Add a TDataSource component to the form. Bind it to the Films table of the VideoCatalogDB database supplied with the ExpressQuantumGrid 4. This example uses a TADOTable component for this purpose.
Add a TcxDBTextEdit control to the tab control’s page. Bind it to the TAGLINE field of the dataset as displayed in the image below.

Use the same technique to add the following editors and bind them to the listed fields:
One more TcxDBTextEdit editor. Bind it to the YEAR field.
A TcxDBMemo control. Bind it to the PHOTOOUTLINE field.
A TcxDBImage control. Bind it to the PHOTO field.
Select the added TcxDBImage control. Set its GraphicClassName property to TJPEGImage. The Stretch property must be set to True to fit images into the control’s area.

After all the required controls have been added, the tab control will look as displayed below.

Handle the OnCreate event of the form to initialize the tabs with values from the CAPTION field. Use the code below for this purpose.

delphi

procedure TForm1.FormCreate(Sender: TObject);
begin
  with ADOTable1 do
  begin
    while not Eof do
    begin
      // adding only captions whose length is less than 20 characters
      if Length(FieldByName('Caption').AsString) < 20 then
        cxTabControl1.Tabs.Add(FieldByName('Caption').AsString);
      Next;
    end;
    cxTabControl1.TabIndex := 0;
    First;
  end;
end;

Write the code that will navigate through dataset records when switching tabs. Handle the OnChange event of the tab control for this purpose. The handler code is listed below.

procedure TForm1.cxTabControl1Change(Sender: TObject);
var s: string;
begin
  s := cxTabControl1.Tabs.Tabs[cxTabControl1.TabIndex].Caption;
  ADOTable1.Locate('Caption', s, []);
end;

Since editors residing on the tab control’s page are bound to data, their content will be automatically updated when switching between tabs.

The last thing remaining is to set the tab control’s MultiLine property to True. This will arrange dynamically added tabs across several rows.

After all the steps have been completed, run the application. The tab control will have an appearance similar to that shown in the image below.