ag-grid - Resize detail height when data changes

Question

I've got a table using a Master/Detail configuration and am using the getRowHeight callback.

The initial setting of height works as expected. My expectation is that when the table data is updated, the height for the rows containing a detail grid will be re-calculated but I cannot seem to trigger a resize of these.

My getRowHeight definition is:

getRowHeight = params => params.node.detail ? this.getDetailHeight(params) : 48;

getDetailHeight = params => {
  let rows = params.data.filterData.length;
  return rows * 48 + 116; // all rows height + (header & footer)
};

The data for the table is updated as such (with the deltaRowDataMode flag being set):

componentDidUpdate() {
    if (this && this.gridApi) {
      this.gridApi.setRowData(_.cloneDeep(this.props.data));
      this.gridApi.resetRowHeights();
      this.gridApi.forEachDetailGridInfo(detail => detail.api.resetRowHeights());
      this.gridApi.redrawRows(_.cloneDeep(this.props.data));
    }
  }

and I'd expect the call to resetRowHeights to trigger getRowHeight again, based on https://www.ag-grid.com/javascript-grid-row-height/#api-resetrowheights:

api.resetRowHeights()

Call this API to have the grid clear all the row heights and work them all out again from scratch - if you provide a getRowHeight() callback, it will be called again for each row. The grid will then resize and reposition all rows again. This is the shotgun approach.

However, the behaviour that I am seeing is getRowHeight being triggered for the master rows only and not the detail grid rows (not rows within the details table, but the height of the detail grid row itself).

I hope this is clear, thanks for any feedback.

Carg Carg · Accepted Answer · 2019-03-15T16:32:13

I've got something that works for my case, if anyone is ever having the same issue. I noticed that for detail nodes ag-grid would not clear the row height on resetRowHeights so I've updated my update method to handle this:

componentDidUpdate() {
    if (this && this.gridApi) {
      this.gridApi.setRowData(_.cloneDeep(this.props.data));
      // call to resetRowHeights will apply the changes from forEachNode(..)
      this.gridApi.forEachNode(row => row.detailNode && row.detailNode.setRowHeight(null));
      this.gridApi.resetRowHeights();
      this.gridApi.redrawRows(_.cloneDeep(this.props.data));
    }
  }

This resets the rowHeight for the detail node so ag-grid reruns the getRowHeight call.

ag-grid - Resize detail height when data changes

`api.resetRowHeights()`

2 Answers