When a cell edit completes, totals are recalculated dynamically:

procedure TForm2.Recalc(RowIndex: integer);
var
  q,p: integer;
begin
  p := integer(WebDataGrid1.CellByName[RowIndex, 'Price']);
  q := integer(WebDataGrid1.CellByName[RowIndex, 'Quantity']);
  WebDataGrid1.CellByName[RowIndex, 'Total'] := p * q;
end;

This style of programming feels very natural to Delphi developers and enables highly interactive applications with minimal code. Note that CellByName is accessible as TJSValue, so you can assign an integer, float, string, boolean, ...

Dynamically Adding Rows and setting Cell Data

Adding rows is equally straightforward:

procedure TForm2.WebButton1Click(Sender: TObject);
begin
  WebDataGrid1.InsertNewRow;
  WebDataGrid1.CellByName[WebDataGrid1.RowCount - 1, 'Product'] := 'Delphi';
  WebDataGrid1.CellByName[WebDataGrid1.RowCount - 1, 'Quantity'] := 0;
  WebDataGrid1.CellByName[WebDataGrid1.RowCount - 1, 'Price'] := 123;
end;

The API remains intuitive and closely aligned with familiar Delphi development patterns.

Loading JSON Data

Modern web applications frequently consume JSON data from REST services or external APIs.

TWebDataGrid includes built-in support for loading JSON directly.

This code snippet shows how easy this can be:

procedure TForm2.WebButton2Click(Sender: TObject);
begin
  WebDataGrid1.Clear;
  WebDataGrid1.ColumnDefs.Clear;

  WebDataGrid1.ColumnDefs.Add.Field := 'Brand';
  WebDataGrid1.ColumnDefs.Add.Field := 'Model';
  WebDataGrid1.ColumnDefs.Add.Field := 'Type';

  WebDataGrid1.LoadFromJSON(
    'https://download.tmssoftware.com/tmsweb/demos/' +
    'TMSWEB_ResponsiveGrid/carsfull.json');
end;

This instantly loads remote JSON data into the grid. No manual parsing is required.

This approach is ideal when:

• Consuming REST APIs
• Working with external cloud services
• Loading static datasets
• Building dashboard applications

Using an adapter 

With TWebDataGrid come 3 different adapters: TDBXDataRestDataAdapter, TDBStellarRestDataAdapter and TDBCustomDataAdapter. TDBXDataRestDataAdapter is a ready to use adapter that can connect a TWebDataGrid to data made accessible through a TMS XData REST API server. TDBStellarRestDataAdapter is the same for our data in the cloud as a service solution https://stellards.io 

In this example, we show the generic TDBCustomDataAdapter that you can use to bind to any REST API.

Instead of loading everything at once, rows are fetched dynamically whenever needed.

This is especially useful for:

• Very large datasets
• Infinite scrolling
• Server-side paging
• Virtualized datasets
• High-performance cloud applications
  
  

To feed the data for the TWebDataGrid, implement the TDBCustomDataAdapter.OnGetRows event:

procedure TForm2.DGCustomDataAdapter1GetRows(Params: TJSGetRowsParams);
var
  I: Integer;
  RowData: TJSArray;
begin
  RowData := TJSArray._of;

  for I := Params.StartRow to Params.EndRow do
  begin
    RowData.push(new([
      'Id', I + 1,
      'Data', 'Row Number ' + IntToStr(I)
    ]));
  end;

  DGCustomDataAdapter1.GetRowsSuccessful(
    RowData,
    10000,
    Params);
end;

The grid automatically retrieves the rows it needs.

Connecting a TWebDBDataGrid to a TDataSet

For Delphi developers who prefer a classic data-aware workflow, TWebDBDataGrid provides direct TDataSet integration.

This enables:

• Live editing
• Field-aware controls
• Existing business logic reuse
• Familiar data binding
• Rapid application development

You can of course connect any TDataSet via a TWebDataSource to a TWebDBDataGrid. But let's in particular zoom-in on using the data in the cloud as a service offered by https://stellards.io  With this service, you do not need to write a REST API server yourself to connect to your data nor bother about managing the hosting of your database. StellarDS.io offers all this with a simple web interface to setup your tables and control the access.

TWebDBDataGrid can directly connect to cloud-hosted backend data using:

• TWebStellarDataStoreClientDataset
• TWebDataSource
• TWebDBDataGrid

Drop these components on the form. Connect the TWebStellarDataStoreClientDataset to TWebDataSource.DataSet and connect the TWebDataSource to TWebDBDataGrid.DataSet.
Specify either the OAuth2 based access-token in TWebStellarDataStoreClientDataset or set the client ID & client secret to follow an OAuth2 authentication & authorization. 
Set the TWebStellarDataStoreClientDataset.TableName to specify the StellarDS.io table you want to connect to.

After this setup, connecting is as simple as:

procedure TForm2.WebButton1Click(Sender: TObject);
begin
  WebStellarDataStoreClientDataset1.Active := true;
end;

Once activated, the dataset automatically retrieves cloud data and the grid immediately displays it.
This gives Delphi developers the same RAD experience they are familiar with from desktop development, but now directly connected to cloud data.

Choosing the Right Approach

Each data connection approach serves different application scenarios.