Issue with checkbox when Checkbox ag-grids are used in Angular7

Question

Trying to implement two ag-grids in asingle component. Have used different columnDefs for both and yet the checkbox for one of the grids is not working.

The first ag-grid works properly but the second one is not capturing the array on selection. The data got rendered fine. Problem arises when we select checkbox for the grid with columnDef

- html
      <div class="row">
        <!-- isin universe -->
        <div class="col-md-6">
          <label>ISIN Universe</label><br>
          <div class="table-responsive">

            <ag-grid-angular #agGrid style="width: 100%; height: 550px" id="myGrid" class="ag-theme-balham"
            [rowData]="searchResultData" [columnDefs]="columnDefs"
            rowSelection="multiple" (rowSelected)="rowSelect($event)" (gridReady)="onGridReadyISIN($event)">
          </ag-grid-angular>
          </div>
        </div>
        <!-- mapped isin -->
        <div class="col-md-6">
            <label>Mapped ISIN</label><br>
            <div class="table-responsive">

            <ag-grid-angular #agGrid2 style="width: 100%; height: 550px" id="myGrid2" class="ag-theme-balham"
            [rowData]="tableDataMap" [columnDefs]="columnDef"
            rowSelection="multiple" (rowSelected)="onRowSelect($event)" (gridReady)="onGridReadyMap($event)">
         </div>
        </div>
      </div>


export class SecurityportfolioComponent implements OnInit {
@BlockUI('block-section') blockUI: NgBlockUI;
@ViewChild('agGrid') agGrid: AgGridAngular;
private gridApi;
private gridColumnApi;
private onGridReady;
columnDefs = [
    {
        sortable: true,
        filter: true,
        width: 30,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        lockPosition: true
    },
    {
        headerName: 'ISIN',
        field: 'isin',
        sortable: true,
        filter: true,
        width: 150
    },
    {
        headerName: 'Security Name',
        field: 'securityName',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Maturity Date',
        field: 'maturityDate',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Rating',
        field: 'rating',
        width: 150,
        lockPosition: true
    }
];
columnDef = [
    {
        sortable: true,
        filter: true,
        width: 30,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        lockPosition: true
    },
    {
        headerName: 'ISIN',
        field: 'isin',
        sortable: true,
        filter: true,
        width: 150
    },
    {
        headerName: 'Security Name',
        field: 'securityName',
        width: 150,
        lockPosition: true
    },
    {
        headerName: 'Maturity Date',
        field: 'maturityDate',
        width: 120,
        lockPosition: true
    },
    {
        headerName: 'Rating',
        field: 'rating',
        width: 120,
        lockPosition: true
    }
];
// row selection
rowSelect(event) {
    this.tempArr = this.agGrid.api.getSelectedRows();
    console.log(this.tempArr);
    // console.log(this.tempArr);
    console.log(this.tableData);
}
onRowSelect(event) {
    // console.log(e);
    this.selectedArr = this.agGrid.api.getSelectedRows();
    console.log(this.selectedArr);
    // console.log(JSON.stringify(this.selectedArr, null, 2));
}

}

Answer 1

you need another :

@ViewChild('agGrid2') agGrid2: AgGridAngular;

and use agGrid2 in the onRowSelect

onRowSelect(event) {
    // console.log(e);
    this.selectedArr = this.agGrid2.api.getSelectedRows();
    console.log(this.selectedArr);
    // console.log(JSON.stringify(this.selectedArr, null, 2));
}