Blog

All Blog Posts  |  Next Post  |  Previous Post

Modern two-way data binding in Delphi

Today

TMS FNC UI Pack 6.7

Intro

TMS FNC UI Pack 6.7 brings a series of significant improvements and fixes mainly focused on the TTMSFNCDataBindercomponent.

The TTMSFNCDataBinder is a versatile, non-visual component included in FNC that simplifies two-way data synchronization between UI controls and various data sources, including TDataSource, TList<T>, and TObjectList<T>. It provides a platform-independent mechanism to keep your UI in sync with data and vice versa—ideal for cross-platform apps built with FNC components.


🔄 What It Does

TTMSFNCDataBinder bridges UI and data by:

  • Reading values from a dataset or collection and applying them to control properties.

  • Writing values back when the user changes them in the UI.

  • Supporting rich data templating, lists, grids, and more.


This makes it suitable for everything from simple form fields to complex data-driven dashboards.

TMS Software Delphi  Components


🧠 Key Concepts

🔗 Binding Modes

  1. Single Value – Binds one control property (like Text) to one dataset field.

  2. List Binding – Populates list-like controls from multiple records.

  3. Column/List Binding – Allows multi-field layout per item (e.g., in multi-column list boxes).

  4. Grid Binding – Fills an entire TTMSFNCDataGrid, TStringGrid, or any other grid like structure from a dataset or collection.


Two-Way Sync Example

TMSFNCDataBinder1.BeginUpdate;

TMSFNCDataBinder1.ConnectSingle(
  TMSFNCEdit1,   // UI control
  DataSource1,   // TDataSource
  'Text',        // Property of the control
  'CustomerName' // Field in the dataset
);

TMSFNCDataBinder1.EndUpdate;
TMSFNCDataBinder1.Active := True;
Any user input into TMSFNCEdit1 will now update CustomerName in the dataset automatically, and vice versa.


🛠 Notifications and Edit Flow

To support editing workflows, TTMSFNCDataBinder uses a notification system:

  • NotifyValueChanged: When a control value changes, and it needs to update the dataset.

  • NotifyEdit: Begins dataset editing (Dataset.Edit).

  • NotifyPost: Commits changes (Dataset.Post).

  • NotifyUpdate: Requests a full refresh from dataset to control.

  • NotifySetActiveRecord: Changes the current record in a list or dataset.


These calls enable developers to coordinate edits with transaction logic or validation.

The TTMSFNCDataBinder automatically manages synchronization between UI controls and datasets for supported FNC components like TTMSFNCEdit, TTMSFNCComboBox, etc. When the user edits a control, the component knows how to notify the data binder that a value has changed and that it should be written back to the dataset.

However, when you're working with custom controls—or controls not supported out of the box—you can still fully participate in this flow by accessing the corresponding TTMSFNCDataBinderItem using the ItemByObject property.


✅ Example: Manual Notification Using ItemByObject

If you're binding a TEdit or another custom control, and you want to manually trigger data flow, you can use:

var
  Item: TTMSFNCDataBinderItem;
begin
  Item := TMSFNCDataBinder1.ItemByObject(Edit1, 'Text');
  if Assigned(Item) then
  begin
    Item.NotifyEdit;          // Start editing the dataset
    Item.NotifyValueChanged;  // Push control value into the dataset
    Item.NotifyPost;          // Post the dataset
  end;
end;

🎨 Templates for HTML Display

Using <#FIELDNAME> templates, you can bind multiple fields into a single control like TTMSFNCHTMLText.

ConnectTemplate(
  TMSFNCHTMLText1,
  DataSource1,
  'Text',
  '<b><#FirstName> <#LastName></b><br/><i><#Email></i>'
);
When the dataset changes, the control updates its text using the latest field values.

⚙️ Built-In Designer Support

  • Object Inspector Binding: Use design-time property editors to connect controls and data sources visually.

  • Binding Preview: Use ShowEditor at runtime to interactively modify and test your bindings.


TMS Software Delphi  Components


🧭 Conclusion

Whether you’re building VCL or FMX applications, TTMSFNCDataBinder slots right into your existing workflows. You gain powerful two-way binding capabilities, cleaner code (no more manual Edit/Post logic scattered throughout forms), and a design-time experience that keeps your productivity high.

If you're serious about building data-aware Delphi applications with modern UI and minimal glue code, TTMSFNCDataBinder should be a core part of your toolkit. It brings the best of Delphi and FNC together. Want to find out more, read through the documentation at https://download.tmssoftware.com/doc/tmsfnccore/components/ttmsfncdatabinding/



Pieter Scheldeman




This blog post has not received any comments yet. Add a comment.



All Blog Posts  |  Next Post  |  Previous Post