ag-grid master detail checkbox not persisting

Question

In ag-grid master detail functionality, i added checkboxes to detail grid when i check row in the first detail grid and then scroll to bottom grid and expand/collapse that grid, the checkbox in first grid is gone (not persisted). https://plnkr.co/edit/UeWohlz76GM7B4L80n91?p=preview

<AgGridReact
  columnDefs={this.state.columnDefs}
  masterDetail={true}
  detailCellRendererParams={this.state.detailCellRendererParams}
  detailRowHeight={this.state.detailRowHeight}
  defaultColDef={this.state.defaultColDef}
  onGridReady={this.onGridReady}
  getRowHeight={this.state.getRowHeight}
  groupDefaultExpanded={1}
  rowData={this.state.rowData}
/>

Checkbox values should be persisted in the first(top grid).

try using onCellValueChanged in colDef for the field and change appropriate value in your state to retain. — Rikin
But no cell value has been changed so onCellValueChanged event wont get triggered, and with large dataset such functionality will hit grid performance. — user2899989

Adrian Meza Adrian Meza · Accepted Answer · 2019-10-22T23:38:07

My Stack rep is not established enough to add a comment, but NOTE, this is not a solution - more comment.

Ag-Grid removes detail grid from the DOM when master grid collapses it. With this, there is no Ag-Grid state to remember what was checked for the collapsed detail grid. In a similar master-detail grid table for a project, this was solved by

maintaining local state of the detail grid selected rows (check one on/off, it gets added/removed from a local state array)
using the detail onGridReady method, invoke a function to programmatically go through each detail row node. I believe you can use GridApi's forEachNode method to do this
As you iterate through each detail node, utilize the detail node's unique ID to see if the same unique ID is stored in selected detail rows local state setup in Step 1. If so, use the node's setSelected method to turn it on

ag-grid master detail checkbox not persisting

1 Answers