CODEWITHSUNDEEP
angularag-gridag-grid-angular
Ashy Ashcsi
Ashy Ashcsi

Reputation: 1597

angular agrid API to refer to different grid's on the same page

I have two ag-Grid's on the same page. The column definition and row data is getting populated for respective grids correctly. I want to refer to these grid's using this.agGrid.api() call. Please find html code below:

<div class="row">
    <div class="col-lg-12 col-md-12">
        <ag-grid-angular id="myGrid" #agGrid style="width: 100%; height:45vh;" class="ag-theme-balham" [rowData]="rowData"
        [columnDefs]="columnDefs"></ag-grid-angular>
    </div>
</div>


<div class="row">
    <div class="col-lg-12 col-md-12">
       <ag-grid-angular id="myGrid1" #agGrid1 style="width: 100%; height:30vh;" class="ag-theme-balham" [rowData]="rowData1"
       [columnDefs]="columnDefs1"></ag-grid-angular>
    </div>
</div>

The code in the ts file is as below:

import { AgGridAngular } from 'ag-grid-angular';
class Test {

 @ViewChild('agGrid') agGrid: AgGridAngular;
 @ViewChild('agGrid') agGrid1: AgGridAngular;

  addData() {
    console.log("grid1", this.agGrid.api.getDisplayedRowCount());
    console.log("grid2", this.agGrid1.api.getDisplayedRowCount());
  }
}

The above code in addData() method does not return correct data. How do I refer to different grid's on the same page ?

Thanks

Upvotes: 0

Views: 415

Answers (1)

LuDeveloper
LuDeveloper

Reputation: 688

First of all, use gridReady event in html file:

<ag-grid-angular  id="myGrid" #agGrid style="width: 100%; height:45vh;" 
class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs"

(gridReady)="onGridReady1($event)"

></ag-grid-angular>

and second table definition with gridReady event in html file:

<ag-grid-angular id="myGrid1" #agGrid1 style="width: 100%; height:30vh;" 
class="ag-theme-balham" [rowData]="rowData1" [columnDefs]="columnDefs1"

(gridReady)="onGridReady1($event)">

</ag-grid-angular>

Now define onGridReady function in ts file, as follows:

gridApi1 :any;
gridApi2 :any;
gridColumnApi1 :any;
gridColumnApi2 :any;
...

onGridReady1(params) {
 this.gridApi1 = params.api;
 this.gridColumnApi1 = params.columnApi;
}

onGridReady2(params) {
 this.gridApi2 = params.api;
 this.gridColumnApi2 = params.columnApi;
}

Now you can call any of gridApi in ts file.

Upvotes: 1

Related Questions