Blog

All Blog Posts  |  Next Post  |  Previous Post

TMS FNC UI Pack 7.2

Thursday, July 2, 2026

TMS FNC UI Pack 7.2

Intro

In many applications, a grid is more than a table on a form. It can represent different views of the same workflow: a summary, a sales overview, an inventory list, a log, or a temporary working set. Traditionally, switching between those views often means clearing and rebuilding the grid, copying data around, or keeping multiple grid controls alive.

In TMS FNC UI Pack 7.2, TTMSFNCDataGrid adds a powerful new way to handle this with TTMSFNCDataGridRendererSource and the grid's RendererSource property.

A renderer source acts as a complete standalone grid layer. It contains its own renderer, its own data, its own appearance and its own state. Assigning that source to a grid makes the grid render that layer by reference.

TMS FNC DataGrid RendererSource own layer screenshot

What RendererSource Does

The new RendererSource property lets one TTMSFNCDataGrid switch between different prepared renderer layers. Each layer can have different columns, rows, data, styling and scroll behavior.

Setting RendererSource to nil uses the grid's own built-in renderer and data. Assigning a TTMSFNCDataGridRendererSource switches the grid to that external layer.

  • One grid, multiple layers: switch between complete grid states without rebuilding the grid from scratch.

  • Layer-specific data: each renderer source keeps its own cells, rows and columns.

  • Layer-specific appearance: each source can have its own colors, selection style and layout settings.

  • Live by reference: the grid does not copy the layer; edits are made on the active renderer source.

  • State preservation: when you switch away from a layer and return later, that layer still has its own data and state.


Preparing Renderer Layers

The included demo prepares two external renderer sources: a blue Sales by Region layer and a green Product Inventory layer. Each source owns its own Renderer.

private
  FSalesLayer: TTMSFNCDataGridRendererSource;
  FInventoryLayer: TTMSFNCDataGridRendererSource;

procedure TFormRendererSource.FormCreate(Sender: TObject);
begin
  SeedGridOwnData;

  FSalesLayer := TTMSFNCDataGridRendererSource.Create(Self);
  FSalesLayer.Name := 'SalesLayer';
  BuildSalesLayer;

  FInventoryLayer := TTMSFNCDataGridRendererSource.Create(Self);
  FInventoryLayer.Name := 'InventoryLayer';
  BuildInventoryLayer;
end;

The grid starts with its own built-in layer. The external layers are prepared up front, but they are not shown until they are assigned to the grid.


Sales by Region

The first renderer source uses a blue theme and contains regional quarterly sales data. The grid switches to this layer without changing the grid control itself.

TMS FNC DataGrid RendererSource sales layer screenshot

procedure TFormRendererSource.BuildSalesLayer;
var
  r: TTMSFNCDataGridRenderer;
begin
  r := FSalesLayer.Renderer;
  r.BeginUpdate;
  try
    r.CellAppearance.FixedLayout.Fill.Color := gcSteelblue;
    r.CellAppearance.FixedLayout.Font.Color := gcWhite;
    r.CellAppearance.NormalLayout.Fill.Color := gcAliceblue;
    r.CellAppearance.SelectedLayout.Fill.Color := gcLightsteelblue;
    r.Options.Column.Stretching.Enabled := True;

    r.FixedRowCount := 1;
    r.ColumnCount := 6;
    r.RowCount := 6;

    r.Cells[0, 0] := 'Region';
    r.Cells[1, 0] := 'Q1';
    r.Cells[2, 0] := 'Q2';
    r.Cells[3, 0] := 'Q3';
    r.Cells[4, 0] := 'Q4';
    r.Cells[5, 0] := 'Total';
  finally
    r.EndUpdate;
  end;
end;


Product Inventory

The second renderer source uses a green theme and contains product inventory data. It has a different column layout, different values and different styling, but it is still displayed through the same grid.

TMS FNC DataGrid RendererSource inventory layer screenshot

procedure TFormRendererSource.BuildInventoryLayer;
var
  r: TTMSFNCDataGridRenderer;
begin
  r := FInventoryLayer.Renderer;
  r.BeginUpdate;
  try
    r.CellAppearance.FixedLayout.Fill.Color := gcSeagreen;
    r.CellAppearance.FixedLayout.Font.Color := gcWhite;
    r.CellAppearance.NormalLayout.Fill.Color := gcHoneydew;
    r.CellAppearance.SelectedLayout.Fill.Color := gcDarkseagreen;
    r.Options.Column.Stretching.Enabled := True;

    r.FixedRowCount := 1;
    r.ColumnCount := 5;
    r.RowCount := 7;

    r.Cells[0, 0] := 'Product';
    r.Cells[1, 0] := 'SKU';
    r.Cells[2, 0] := 'In Stock';
    r.Cells[3, 0] := 'Reorder Level';
    r.Cells[4, 0] := 'Status';
  finally
    r.EndUpdate;
  end;
end;


Switching Layers

Once the layers are prepared, switching the grid is just a property assignment:

procedure TFormRendererSource.btnSalesClick(Sender: TObject);
begin
  TMSFNCDataGrid1.RendererSource := FSalesLayer;
end;

procedure TFormRendererSource.btnInventoryClick(Sender: TObject);
begin
  TMSFNCDataGrid1.RendererSource := FInventoryLayer;
end;

procedure TFormRendererSource.btnDefaultClick(Sender: TObject);
begin
  TMSFNCDataGrid1.RendererSource := nil;
end;

This makes it possible to build dashboards, inspectors, drill-down views and alternate data views while keeping the UI simple: one visible grid, multiple prepared renderer layers.


Editing the Active Layer

The grid facade always targets the active layer. If the sales layer is active, grid edits affect the sales renderer source. If the inventory layer is active, edits affect the inventory renderer source. When the grid is using its own built-in renderer, edits affect the grid's own data.

procedure TFormRendererSource.btnAddRowClick(Sender: TObject);
var
  newRow: Integer;
begin
  TMSFNCDataGrid1.BeginUpdate;
  try
    newRow := TMSFNCDataGrid1.RowCount;
    TMSFNCDataGrid1.RowCount := newRow + 1;
    TMSFNCDataGrid1.Cells[0, newRow] := Format('Added row %d', [newRow]);
  finally
    TMSFNCDataGrid1.EndUpdate;
  end;
end;

Because each renderer source keeps its own state, changes remain with that layer even after switching to another layer and back.


Where This Helps

RendererSource is especially useful when an application needs to reuse the same grid area for different kinds of information:

  • Dashboards: switch between summary, sales and inventory views.

  • Master-detail screens: show different detail grids without creating multiple visible controls.

  • Data inspectors: keep separate layouts for different object types.

  • Temporary working views: let users edit a layer and return to it later with its state intact.


Installing TMS FNC UI Pack 7.2

TMS FNC UI Pack 7.2 is also available through the modern installation workflow. As described in the modernized installer blog post, TMS is moving product installation to the newer Smart Setup based flow.

tms self-update

tms install tms.fnc.*

If you are migrating from classic installers, first uninstall older TMS FNC UI Pack installations from the previous setup flow before installing through Smart Setup. This keeps the IDE paths, package registrations and product folders clean.


Conclusion

RendererSource in TTMSFNCDataGrid adds a clean way to work with multiple complete grid layers from a single visible grid. Each layer can keep its own data, appearance and state, while the grid can switch between them with one assignment.

For applications that need flexible data views, dashboards or context-sensitive grids, TMS FNC UI Pack 7.2 makes the architecture simpler and the user experience smoother.



Pieter Scheldeman




This blog post has received 2 comments.


1. Friday, July 3, 2026 at 2:49:06 PM

Is there somewhere in the planning foreseen to render the grid as a listview?

ERIK FIDLERS


2. Friday, July 3, 2026 at 3:04:13 PM

Hi,

We have plenty of list / listview type of controls. If you want to keep using the datagrid, you can just stretch one column, so this is already possible.

Pieter Scheldeman




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post