Skip to main content
Table of Contents

Headers, footers & buttons

Configure the grid header and footer bars, group columns visually, and add custom header or footer buttons for application commands.

Overview

The grid header and footer are more than captions. They can host visual column groups, paging controls, and custom buttons. Keep these commands close to the grid when they act on grid state: filtering, exporting, toggling hidden columns, or switching views.

Area Purpose
Header.Visible Shows or hides the header area.
Header.VisualGrouping Groups related columns under visual bands.
Header.Bar.Buttons Adds custom buttons to the header bar.
Footer.Visible Shows or hides the footer area.
Footer.Bar.Buttons Adds custom buttons to the footer bar.

Visual grouping zone

Header.VisualGrouping is an interactive drop zone above the column headers. The user drags column header chips into it to group rows by that column; dropping a second chip at a different vertical position creates a nested group level. Clicking the × on a chip removes that group level.

Enable it with:

Inline example 1PascalC++
Grid.Header.Visible := True;
Grid.Header.VisualGrouping.Visible := True;
Grid.Header.VisualGrouping.AutoSize := True;   // zone grows as chips accumulate

Grid.Options.Mouse.ColumnDragging := True;     // allow header dragging

Grid->Header->Visible = true;
Grid->Header->VisualGrouping->Visible = true;
Grid->Header->VisualGrouping->AutoSize = true;   // zone grows as chips accumulate

Grid->Options->Mouse->ColumnDragging = true;     // allow header dragging

Style the chip area and level indicators:

Inline example 2PascalC++
Grid.Header.VisualGrouping.Layout.Fill.Color             := gcLightgray;
Grid.Header.VisualGrouping.LevelIndicationFill.Color     := gcLightgray;
Grid.Header.VisualGrouping.LevelActiveIndicationFill.Color := gcLightblue;
Grid.Header.VisualGrouping.ConnectionLines               := True;
Grid.Header.VisualGrouping.CloseIndicator                := True;
Grid.Header.VisualGrouping.SortOnClick                   := True;

Grid->Header->VisualGrouping->Layout->Fill->Color             = gcLightgray;
Grid->Header->VisualGrouping->LevelIndicationFill->Color     = gcLightgray;
Grid->Header->VisualGrouping->LevelActiveIndicationFill->Color = gcLightblue;
Grid->Header->VisualGrouping->ConnectionLines               = true;
Grid->Header->VisualGrouping->CloseIndicator                = true;
Grid->Header->VisualGrouping->SortOnClick                   = true;

For the full interactive-grouping workflow — including OnGetCustomGroup for custom keys and adding bar buttons — see Grouping → Interactive (visual) grouping.

Header buttons

Add buttons through Header.Bar.Buttons. Buttons can display text, a bitmap, or both.

Add a custom header bar buttonPascalC++
var
  Btn: TTMSFNCDataGridButton;
begin
  Btn := Grid.Header.Bar.Buttons.Add;
  Btn.Name := 'FilterButton';
  Btn.Text := 'Filter';
  Btn.Hint := 'Apply the current filter';
  Btn.Width := 160;
  Btn.OnClick := HeaderFilterButtonClick;
end;

{
  TTMSFNCDataGridButton *Btn = Grid->Header->Bar->Buttons->Add();
  Btn->Name = "FilterButton";
  Btn->Text = "Filter";
  Btn->Hint = "Apply the current filter";
  Btn->Width = 160;
  Btn->OnClick = HeaderFilterButtonClick;
}
Header button Header button (dark theme)

You can also use a callback for compact button logic:

Inline example 3PascalC++
Btn.Callback :=
  procedure
  begin
    Grid.ShowFilterDialog;
  end;

Btn->OnClick = [](TObject *)
{
  Grid->ShowFilterDialog();
};

Footer buttons use the same pattern on Footer.Bar.Buttons.

Inline example 4PascalC++
Grid.Footer.Visible := True;

with Grid.Footer.Bar.Buttons.Add do
begin
  Name := 'ExportButton';
  Text := 'Export';
  OnClick := ExportButtonClick;
end;

Grid->Footer->Visible = true;

with Grid->Footer->Bar->Buttons->Add do
{
  Name = L"ExportButton";
  Text = L"Export";
  OnClick = ExportButtonClick;
}

Footer buttons work well for paging, totals, export commands, and commands that apply to the entire grid rather than one column.

The header and footer areas are most useful when their parts cooperate. The visual grouping zone lets users build groups by dragging chips, but they also need a quick way to undo that work, and a footer bar is a natural place for commands that affect the whole grid. Use this combination for grouped reports where users regroup often. The example turns on the grouping zone, adds an Ungroup button to the header bar that removes all grouping, and adds an Expand all button to the footer bar. Both buttons use plain OnClick handlers, so they work the same on every framework.

Visual grouping zone with header and footer buttonsPascalC++
procedure TForm1.SetupHeaderAndFooter;
var
  Btn: TTMSFNCDataGridButton;
begin
  // Visual grouping zone above the column headers
  Grid.Header.Visible := True;
  Grid.Header.VisualGrouping.Visible := True;
  Grid.Header.VisualGrouping.AutoSize := True;
  Grid.Options.Mouse.ColumnDragging := True;

  // Header bar button: remove all grouping
  Grid.Header.Bar.Visible := True;
  Btn := Grid.Header.Bar.Buttons.Add;
  Btn.Name := 'UngroupButton';
  Btn.Text := 'Ungroup';
  Btn.Width := 100;
  Btn.OnClick := UngroupButtonClick;

  // Footer bar button: expand every group
  Grid.Footer.Visible := True;
  Grid.Footer.Bar.Visible := True;
  Btn := Grid.Footer.Bar.Buttons.Add;
  Btn.Name := 'ExpandButton';
  Btn.Text := 'Expand all';
  Btn.Width := 100;
  Btn.OnClick := ExpandButtonClick;
end;

procedure TForm1.UngroupButtonClick(Sender: TObject);
begin
  Grid.Ungroup;
end;

procedure TForm1.ExpandButtonClick(Sender: TObject);
begin
  Grid.ExpandAllNodes;
end;

void __fastcall TForm1::SetupHeaderAndFooter()
{
  // Visual grouping zone above the column headers
  Grid->Header->Visible = true;
  Grid->Header->VisualGrouping->Visible = true;
  Grid->Header->VisualGrouping->AutoSize = true;
  Grid->Options->Mouse->ColumnDragging = true;

  // Header bar button: remove all grouping
  Grid->Header->Bar->Visible = true;
  TTMSFNCDataGridButton *Btn = Grid->Header->Bar->Buttons->Add();
  Btn->Name = "UngroupButton";
  Btn->Text = "Ungroup";
  Btn->Width = 100;
  Btn->OnClick = UngroupButtonClick;

  // Footer bar button: expand every group
  Grid->Footer->Visible = true;
  Grid->Footer->Bar->Visible = true;
  Btn = Grid->Footer->Bar->Buttons->Add();
  Btn->Name = "ExpandButton";
  Btn->Text = "Expand all";
  Btn->Width = 100;
  Btn->OnClick = ExpandButtonClick;
}

void __fastcall TForm1::UngroupButtonClick(TObject *Sender)
{
  Grid->Ungroup();
}

void __fastcall TForm1::ExpandButtonClick(TObject *Sender)
{
  Grid->ExpandAllNodes();
}
  • TTMSFNCDataGrid.Header
  • TTMSFNCDataGrid.Footer
  • Header.VisualGrouping
  • Header.Bar.Buttons
  • Footer.Bar.Buttons
  • TTMSFNCDataGridButton

See also

  • Grouping — full interactive (visual) grouping guide including drag-to-group, custom keys, and bar buttons.
  • Column management — hiding, moving, and stretching columns.
  • Paging — built-in footer paging controls.
  • Advanced filtering — opening the filter dialog from header commands.