How update ag-grid data when TreeData feature is used

Question

ag-grid documentation provides 2 features Tree Data and Data Update:

But I don't understand how am I supposed to perform Data Update over Tree Data

Example: I have following javascript data:

const tvSeries = [
  {
    season: "Season 1",
    episodes: [
      {episode: "s1e1"},
      {episode: "s1e2"},
      {episode: "s1e3"},
      ]
  },
  {
    season: "Season 2",
    episodes: [
      {episode: "s2e1"},
      {episode: "s2e2"},
      {episode: "s2e3"},
      ]
  }
]

And set it to grid via

 gridApi.setRowData(tvSeries)

Each season will be grouping row with children rows - its episodes

Now I want to add new episode to first season, so I do

tvSeries[0].episodes.push({episode: "s1e4"})

How should I notify grid about this change? If I call gridApi.setRowData(tvSeries) one more time - entire grid will be redrawn, it's sloppy and not cool. There are useful method

gridApi.updateRowData(rowDataTransaction: RowDataTransaction)

but I cant understand how to describe tree changes in RowDataTransaction

Alex Alex · Accepted Answer · 2017-08-04T14:30:28

Looks like it is impossible to partially update data when using TreeData feature.

Restriction #1: InMemoryNodeManager contains guard which prohibit updating group set (add/remove/update groups):

public updateRowData(rowDataTran: RowDataTransaction): RowNodeTransaction {
    if (this.isRowsAlreadyGrouped()) { return null; }
    ...
}

Restriction #2: RowRenderer.redrawRows don't force children refresh for redrawn groups. So if children subset is changed, grid will never be aware of it

Both restriction leads to a situation, when neither top-level groups can't be partially updater, not their children. The only method left for developer is gridApi.setRowData() which reloads entire grid.

How update ag-grid data when TreeData feature is used

1 Answers