Ag-grid: One page have two ag-grids ,the first grid's event will be override by the second gird.

[Sudors]

version:
react: 16.8.6
ag-grid-community: "21.1.0"
ag-grid-react: 21.1.0
tool:
vsc

One page have two ag-grids ,the first grid's event will be override by the second gird.

[davis4acca]

Hi,

Unfortunately we can't tell what your issue is given your description.

This ticket is going to nbe flagged as managed_by_the_comunnity, this means that ag-grid staff is not going to be actively looking into it, and it will get closed if inactive for more than one month, the community is welcome to help with this question/support issue

If you are an ag-Grid Enterprise Customer, please raise this in our Zendesk support system - contact [email protected] for access. This is our primary channel for Support.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jakehoskins]

@davis4acca I actually had this issue on the latest version. Not sure if it's the same bug but similar experience. Suspect fix isn't actually required and have provided a way to get around it below for future users looking at this.

1. Create a component that renders two grids

import React from 'react';
import { Grid } from './Grid';

const SHARED_OPTIONS = { suppressCellSelection: true }

export default class App extends React.Component {
  render() {
    return <React.Fragment>
        <Grid identifier='table-1' rowData={[]} gridOptions={SHARED_OPTIONS} />
        <Grid identifier='table-2' rowData={[]} gridOptions={SHARED_OPTIONS} />
      </React.Fragment>
  }
}

2. The wrapped grid

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

export class Grid extends React.Component {
    api;

    render() {
        return <AgGridReact
        gridOptions={this.props.gridOptions}
        onGridReady={ (e) => console.log(this.props.identifier, e)}
        gridAutoHeight={true}
        rowData={this.props.rowData}
        columnDefs={[ { field: 'id', headerName: 'ID' } ]}
    />
    }
}

Notice that when onGridReady is called 'table-2' is printed twice.

The fix I found is to use spread operator when referencing shared options like below:

<Grid identifier='table-1' rowData={[]} gridOptions={{...SHARED_OPTIONS }} />
<Grid identifier='table-2' rowData={[]} gridOptions={{...SHARED_OPTIONS }} />

Note my issue was related to this because I was obtaining a reference to the api onGridReady and this was unreliable without the above fix because the api parameter often get assigned to the wrong instance. May also be related to #3724 since I was also trying to toggle loading screens two grids on page.

"react": "^16.13.1",
"ag-grid-community": "^23.2.1",
"ag-grid-react": "^23.2.1",