I have been facing some issues with the server side option to load the data

rowModelType: ‘serverSide’

I am facing issues with refreshing the ag-grid with some modified data but it’s not getting updated

Please note that I am using AG Grid Enterprise with the below versions.

"ag-grid-community": "^27.2.1",
"ag-grid-enterprise": "^27.2.1",
"ag-grid-react": "^27.2.1",

I have tried with the below approach.

this.api.refreshServerSideStore({ purge: false})}

I have noticed that the above method is helping refresh the data when I implement with a DOM button but it’s not working with functional implementation as shared in the below code snippet.

<button id="refresh-grid" onClick={() => this.api.refreshServerSideStore({ purge: false})}>refresh</button>

But, if I trigger the same method functionally, it’s not getting refreshed.

const buttonElement = document.getElementById('refresh-grid');
if (buttonElement) {
  setTimeout(() => {
    buttonElement.click()
  }, 5000)
}
}

Also, this is impacting the other features like Select All in the ag grid as the data is not rendered into the ag-grid properly.

If this helps, these are the properties that are being passed into AgGridReact:

this.gridProps = {
      onGridReady: this.handleGridReady,
      onModelUpdated: this.handleGridModelUpdated,
      onRowGroupOpened: this.handleGridRowGroupOpened,
      rowModelType: 'serverSide',
      getRowNodeId: d => d.id,
      infiniteInitialRowCount: 1500,
      cacheBlockSize: 500,
      blockLoadDebounceMillis: 150,
      maxConcurrentDatasourceRequests: 2,
      suppressCellSelection: true,
      enableCellTextSelection: true,
      floatingFilter: true,
      defaultColDef: { resizable: true, filter: true, sortable: true, menuTabs: ['filterMenuTab', 'generalMenuTab'] },
      columnDefs,
      detailRowHeight: 330,
      detailCellRendererParams: {
        detailGridOptions: {
          columnDefs: [
            { headerName: 'ID', field: 'id', width: 50 },
            { headerName: 'Test', field: 'test', width: 55 },
          ],
        },
        getDetailRowData: this.handleGridDetail,
        components: {
          detailCellRenderer: DetailCellRenderer,
        },
      },
      serverSideStoreType: 'partial',
      masterDetail: true,
      isRowMaster: () => true, // d.listQuantity > 1 || (lmEnabled && !!d.campaignQuantity),
      // keepDetailRows: true, Only disabling because the tab auto-selection won't work the second time it's opened, if opening via clicking the marketing columns.
      keepDetailRowsCount: 1000,
      detailCellRenderer: 'detailCellRenderer',
      frameworkComponents: {
        indexCellRenderer: IndexCellRenderer,
        indexHeaderRenderer: IndexHeaderRenderer,
        propertyAddressCellRenderer: PropertyAddressCellRenderer,
        detailCellRenderer: DetailCellRenderer,
        gridDateComponent: GridDateComponent,
      },
      context: this.gridContext,
      dateComponent: 'gridDateComponent',
      getContextMenuItems: this.getContextMenuItems,
    };