Skip to main content
Table of Contents

Custom icons

Replace any of the grid's built-in glyphs (sort arrows, filter funnel, expand/collapse triangles, pagination buttons, …) with your own bitmaps.

Overview

Grid.Icons is a collection of bitmap slots, one per built-in glyph. Each slot accepts a TTMSFNCBitmap. Slots left at nil keep their built-in vector icon.

Inline example 1PascalC++
Grid.Icons.SortAscendingIcon  := MyAscIcon;
Grid.Icons.SortDescendingIcon := MyDescIcon;
Grid.Icons.FilterIcon         := MyFilterIcon;
Grid.Icons.FilterActiveIcon   := MyFilterActiveIcon;
Grid.Icons.ExpandIcon         := MyExpandIcon;
Grid.Icons.CollapseIcon       := MyCollapseIcon;

Grid->Icons->SortAscendingIcon  = MyAscIcon;
Grid->Icons->SortDescendingIcon = MyDescIcon;
Grid->Icons->FilterIcon         = MyFilterIcon;
Grid->Icons->FilterActiveIcon   = MyFilterActiveIcon;
Grid->Icons->ExpandIcon         = MyExpandIcon;
Grid->Icons->CollapseIcon       = MyCollapseIcon;

Quick example

Inline example 2PascalC++
procedure TForm1.FormCreate(Sender: TObject);
begin
  Grid.Icons.SortAscendingIcon  := LoadBitmap('icons/up.png');
  Grid.Icons.SortDescendingIcon := LoadBitmap('icons/down.png');
  Grid.Icons.FilterIcon         := LoadBitmap('icons/funnel.png');
  Grid.Icons.FilterActiveIcon   := LoadBitmap('icons/funnel-active.png');
end;

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  Grid->Icons->SortAscendingIcon  = LoadBitmap(L"icons/up->png");
  Grid->Icons->SortDescendingIcon = LoadBitmap(L"icons/down->png");
  Grid->Icons->FilterIcon         = LoadBitmap(L"icons/funnel->png");
  Grid->Icons->FilterActiveIcon   = LoadBitmap(L"icons/funnel-active->png");
}

Available slots

Sorting

Slot Used for
SortAscendingIcon Header indicator when the column is sorted ascending.
SortDescendingIcon Same, descending.
Inline example 3PascalC++
Grid.Icons.SortAscendingIcon  := BitmapContainer.FindBitmap('sort-asc');
Grid.Icons.SortDescendingIcon := BitmapContainer.FindBitmap('sort-desc');

Grid->Icons->SortAscendingIcon  = BitmapContainer->FindBitmap(L"sort-asc");
Grid->Icons->SortDescendingIcon = BitmapContainer->FindBitmap(L"sort-desc");

Filtering

Slot Used for
FilterIcon The funnel button on each filterable column header.
FilterActiveIcon Variant shown when a filter is currently active on the column.
FilterClearIcon The "clear filter" button in the filter row.
FilterTypeIcon Drop-down arrow next to the filter type selector.
Inline example 4PascalC++
Grid.Icons.FilterIcon       := BitmapContainer.FindBitmap('filter');
Grid.Icons.FilterActiveIcon := BitmapContainer.FindBitmap('filter-active');
Grid.Icons.FilterClearIcon  := BitmapContainer.FindBitmap('filter-clear');
Grid.Icons.FilterTypeIcon   := BitmapContainer.FindBitmap('filter-type');

Grid->Icons->FilterIcon       = BitmapContainer->FindBitmap(L"filter");
Grid->Icons->FilterActiveIcon = BitmapContainer->FindBitmap(L"filter-active");
Grid->Icons->FilterClearIcon  = BitmapContainer->FindBitmap(L"filter-clear");
Grid->Icons->FilterTypeIcon   = BitmapContainer->FindBitmap(L"filter-type");

Tree / grouping

Slot Used for
ExpandIcon Triangle/plus shown on collapsed group headers.
CollapseIcon Same, when the group is expanded.
CloseIcon Close button on a header group.
Inline example 5PascalC++
Grid.Icons.ExpandIcon   := BitmapContainer.FindBitmap('expand');
Grid.Icons.CollapseIcon := BitmapContainer.FindBitmap('collapse');
Grid.Icons.CloseIcon    := BitmapContainer.FindBitmap('close');

Grid->Icons->ExpandIcon   = BitmapContainer->FindBitmap(L"expand");
Grid->Icons->CollapseIcon = BitmapContainer->FindBitmap(L"collapse");
Grid->Icons->CloseIcon    = BitmapContainer->FindBitmap(L"close");

Paging

Slot Used for
FirstPageIcon First-page button.
PreviousPageIcon Previous-page button.
NextPageIcon Next-page button.
LastPageIcon Last-page button.

Paging

Slot Used for
FirstPageIcon First-page button.
PreviousPageIcon Previous-page button.
NextPageIcon Next-page button.
LastPageIcon Last-page button.
Inline example 6PascalC++
Grid.Icons.FirstPageIcon    := BitmapContainer.FindBitmap('page-first');
Grid.Icons.PreviousPageIcon := BitmapContainer.FindBitmap('page-prev');
Grid.Icons.NextPageIcon     := BitmapContainer.FindBitmap('page-next');
Grid.Icons.LastPageIcon     := BitmapContainer.FindBitmap('page-last');

Grid->Icons->FirstPageIcon    = BitmapContainer->FindBitmap(L"page-first");
Grid->Icons->PreviousPageIcon = BitmapContainer->FindBitmap(L"page-prev");
Grid->Icons->NextPageIcon     = BitmapContainer->FindBitmap(L"page-next");
Grid->Icons->LastPageIcon     = BitmapContainer->FindBitmap(L"page-last");

Loading bitmaps

TTMSFNCBitmap accepts PNG, JPEG, BMP, and SVG. Load from a file:

Load an icon bitmap from a filePascalC++
procedure TForm1.LoadFilterIcon;
var
  Bmp: TTMSFNCBitmap;
begin
  Bmp := TTMSFNCBitmap.Create;
  Bmp.LoadFromFile('icons/funnel.png');
  Grid.Icons.FilterIcon := Bmp;
end;

void __fastcall TForm1::LoadFilterIcon()
{
  TTMSFNCBitmap *Bmp = new TTMSFNCBitmap();
  Bmp->LoadFromFile("icons/funnel.png");
  Grid->Icons->FilterIcon = Bmp;
}

Or from a TTMSFNCBitmapContainer registered on the form:

Inline example 7PascalC++
Grid.Icons.FilterIcon := BitmapContainer.FindBitmap('funnel');

Grid->Icons->FilterIcon = BitmapContainer->FindBitmap(L"funnel");

Resetting to defaults

Assigning nil falls back to the built-in vector icon. To restore a single slot:

Inline example 8PascalC++
Grid.Icons.FilterIcon := nil;

Grid->Icons->FilterIcon = nullptr;

Combining sort, filter, and grouping icons in one pass

Replace all interactive feature icons at form startup from a single TTMSFNCBitmapContainer:

Inline example 9PascalC++
procedure TForm1.FormCreate(Sender: TObject);
begin
  { Sorting icons }
  Grid.Icons.SortAscendingIcon  := BitmapContainer.FindBitmap('sort-asc');
  Grid.Icons.SortDescendingIcon := BitmapContainer.FindBitmap('sort-desc');

  { Filter icons — active variant highlights columns with an applied filter }
  Grid.Icons.FilterIcon       := BitmapContainer.FindBitmap('filter');
  Grid.Icons.FilterActiveIcon := BitmapContainer.FindBitmap('filter-active');
  Grid.Icons.FilterClearIcon  := BitmapContainer.FindBitmap('filter-clear');

  { Tree / grouping icons }
  Grid.Icons.ExpandIcon   := BitmapContainer.FindBitmap('expand');
  Grid.Icons.CollapseIcon := BitmapContainer.FindBitmap('collapse');

  { Paging navigation }
  Grid.Icons.FirstPageIcon    := BitmapContainer.FindBitmap('page-first');
  Grid.Icons.PreviousPageIcon := BitmapContainer.FindBitmap('page-prev');
  Grid.Icons.NextPageIcon     := BitmapContainer.FindBitmap('page-next');
  Grid.Icons.LastPageIcon     := BitmapContainer.FindBitmap('page-last');
end;

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  { Sorting icons }
  Grid->Icons->SortAscendingIcon  = BitmapContainer->FindBitmap(L"sort-asc");
  Grid->Icons->SortDescendingIcon = BitmapContainer->FindBitmap(L"sort-desc");

  { Filter icons — active variant highlights columns with an applied filter }
  Grid->Icons->FilterIcon       = BitmapContainer->FindBitmap(L"filter");
  Grid->Icons->FilterActiveIcon = BitmapContainer->FindBitmap(L"filter-active");
  Grid->Icons->FilterClearIcon  = BitmapContainer->FindBitmap(L"filter-clear");

  { Tree / grouping icons }
  Grid->Icons->ExpandIcon   = BitmapContainer->FindBitmap(L"expand");
  Grid->Icons->CollapseIcon = BitmapContainer->FindBitmap(L"collapse");

  { Paging navigation }
  Grid->Icons->FirstPageIcon    = BitmapContainer->FindBitmap(L"page-first");
  Grid->Icons->PreviousPageIcon = BitmapContainer->FindBitmap(L"page-prev");
  Grid->Icons->NextPageIcon     = BitmapContainer->FindBitmap(L"page-next");
  Grid->Icons->LastPageIcon     = BitmapContainer->FindBitmap(L"page-last");
}

Any slot left unassigned falls back to the built-in vector icon automatically — you only need to replace the slots you want to customize.

  • Grid.Icons — the icon collection.
  • Grid.BitmapContainer — registry of named bitmaps shared across the grid.

See also

  • Sorting — sort indicator icons appear in column headers.
  • Filtering — filter button and active-filter indicators.
  • Grouping — expand/collapse triangles in group rows.
  • Paging — first/prev/next/last navigation icons.