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));
}

}

alin0509 · Accepted Answer · 2019-12-12 12:07:13Z

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));
}

answered Dec 12, 2019 at 12:07

alin0509

5614 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related