OutSystems Data Grid 行追加 JavaScriptでWe couldn’t find any dataと表示される原因と対処法

OutSystems の Data Grid に「データ付きの行を追加する方法」について調べると、以下のような記事やサンプルコードが見つかります。

[OutSystems Data Grid] Add a new row below in Data Grid in Reactive App.

var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
var items = new Array(1).fill(_.cloneDeep({}));

if (gridObj) {
    gridObj.dataSource.addRow(gridObj.rowMetadata._grid.rows.length + 1, items);
}

一見すると、addRow() を使って新しい行を追加できるように見えます。

実際の実行結果

上記のコードを実行すると、確かに Data Grid 上に新しい行は追加されます。
しかし、Grid には次のメッセージが表示されます。

We couldn’t find any data to show here

つまり、

行は追加されているように見える
しかし実際の DataSource にはデータが追加されていない

という状態になります。

JavaScript を使用して追加する場合の方法

基本的には、Data Grid が提供している標準 Action を使用することを推奨します。

しかし、どうしても JavaScript で追加する必要がある場合は、以下のように 公式 GridAPI を使用する方法がより安全です。

OutSystems.GridAPI.Rows.AddRows(
    $parameters.DatagridWidgetId,
    $parameters.NumberOfRows
);
var grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.DatagridWidgetId);
OutSystems.GridAPI.Cells.SetCellData(
    $parameters.DatagridWidgetId,
    grid.rowMetadata._grid.rows.length - 1,
    $parameters.ColumnWidgetId,
    $parameters.Value,
    $parameters.ShowDirtyMark,
    $parameters.TriggerChangeEvent
);

この方法では、

AddRows で正しく行を追加
SetCellData でセルに値を設定

という流れで、Data Grid の内部状態と整合性を保ちながらデータを追加できます。