Blog

All Blog Posts | Next Post | Previous Post

Dynamic cell style and cell data formatting in TWeb(DB)DataGrid

Today

TMS Software Delphi Components tmswebcore

When presenting data in a web application, displaying raw values is often not enough. Users expect important information to stand out immediately, whether it is a high-performance car, an exceptional sales figure, or a value that requires attention.

With TMS WEB Core and the powerful TWebDataGrid and TWebDBDataGrid components, dynamically styling and formatting cells based on their content is straightforward. In this article, we'll look at three different approaches for customizing cell appearance and formatting and examine a practical example built with TWebDBDataGrid.

Three Ways to Customize Cell Appearance

TWebDataGrid and TWebDBDataGrid provide three complementary mechanisms for dynamic presentation.

1. OnGetCellStyle

The OnGetCellStyle event allows you to return a JavaScript style object that is applied directly to the cell.

This is ideal when styling depends on data values and you want to generate styles programmatically.

Example:

function TForm2.WebDBDataGrid1Column_HpGetCellStyle(
  Params: TJSCellClassParams): TJSValue;
begin
  if Integer(Params.Value) > 500 then
    Result := new(['color', 'red',
                   'backgroundColor', 'yellow']);
end;

In this example, any horsepower value above 500 is displayed using red text on a yellow background.

2. OnGetCellClass

Instead of returning inline styles, you can return a CSS class name.

This approach keeps styling centralized in CSS and is often the preferred solution for larger applications.

function TForm2.WebDBDataGrid1Column_HpGetCellClass(
  Params: TJSCellClassParams): TJSValue;
begin
  if Integer(Params.Value) > 500 then
    Result := 'supercar';
end;

The CSS class can then be defined in your application's stylesheet:

.supercar {
  color: red;
  background-color: yellow;
}

This separation of logic and presentation makes styling easier to maintain.

3. ValueFormatter

Sometimes the value itself should be displayed differently without modifying the underlying data.

The ValueFormatter event allows you to transform the value before it is rendered.

function TForm2.WebDBDataGrid1Column_PriceValueFormatter(
  Value: TJSValue): TJSValue;
var
  i: Integer;
begin
  i := Integer(Value);
  Result := FormatFloat('#,##0', i) + '€';
end;

A numeric value such as:

125000

is rendered as:

125,000€

making it significantly easier to read.

Combining Formatting and Styling

The sample application demonstrates how these techniques can work together.

For the Price column, values are right-aligned:

function TForm2.WebDBDataGrid1Column_PriceGetCellStyle(
  Params: TJSCellClassParams): TJSValue;
begin
  Result := new(['text-align', 'right']);
end;

This creates a more professional presentation for numeric data while the formatter ensures proper thousands separators.

At the same time, the Horsepower column receives special highlighting when values exceed 500 HP, helping users quickly identify high-performance vehicles.

With a couple of simple lines of code, we get the presentation of the data from this stale appearance:
TMS Software Delphi Components tmswebcore

Loading Data Dynamically

The sample also demonstrates how easily external JSON data can be loaded into a TWebDBDataGrid.

procedure TForm2.WebFormShow(Sender: TObject);
begin
  WebClientConnection1.URI :=
    'https://download.tmssoftware.com/tmsweb/demos/TMSWEB_ResponsiveGrid/carsfull.json';

  WebClientConnection1.Active := True;
end;

When the form is displayed, the dataset automatically retrieves the JSON data and populates the grid.

Combined with dynamic styling and formatting, this creates a rich and responsive data visualization experience with only a small amount of code.

Conclusion

Dynamic cell styling is an important technique for improving usability and helping users focus on the information that matters most.

TWebDataGrid and TWebDBDataGrid offer several powerful customization mechanisms:

OnGetCellStyle for dynamically generated inline styles
OnGetCellClass for CSS-based styling
ValueFormatter for custom value presentation

These features can be combined to create visually appealing and highly informative data grids while keeping the implementation concise and maintainable.

Whether you need conditional formatting, custom number presentation, or responsive visual feedback, TMS WEB Core provides all the tools necessary to build modern web-based data applications.

Video

Try it today

Want to explore TWebDataGrid and TWebDBDataGrid yourself?

Download the latest version of TMS WEB Core and discover how easy it is to build modern Delphi web applications with rich, responsive data grids.

Happy coding!

Bruno Fierens

TMS WEB Core v3.0 Beta: introducing the DB-aware TWebDataGrid

Connecting TWebDataGrid & TWebDBDataGrid to Your Data

Editing, sorting, filtering and paging in TWeb(DB)DataGrid

Dynamic cell style and cell data formatting in TWeb(DB)DataGrid

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