CODEWITHSUNDEEP
angularag-grid-angular
Zameer
Zameer

Reputation: 67

How to render multiple ag-grid in single component using Angular 6

I have multiple ag-grid in html page, I want get the specific row values of an ag-grid in component.

html

 <ag-grid-angular #agGrid1 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData1" [columnDefs]="cols" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

 <ag-grid-angular #agGrid2 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData2" [columnDefs]="cols2" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

component.ts

  @ViewChild('agGrid1', { static: true }) agGrid: AgGridAngular;
  @ViewChild('agGrid2', { static: true }) agGrid2: AgGridAngular;

  getRowsData() {

      this.selectedRows1 = this.agGrid.api.getSelectedRows();
      this.selectedRows2 = this.agGrid2.api.getSelectedRows();
     console.log( this.selectedRows1,  this.selectedRows2)

  }

Here I am trying to get the values of both ag-grid rows, but I am getting:

ERROR TypeError: Cannot read property 'api' of undefined error.

Upvotes: 4

Views: 8125

Answers (2)

kushal shah
kushal shah

Reputation: 863

Done Ag-Grid setUp

And I have tried with below code , Bind grid Proper way

In your HTML File

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady1($event)"
>
</ag-grid-angular>

and In app.component.ts file

private gridApi;
  private gridColumnApi;
  private gridApi1;
  private gridColumnApi1;
  rowSelection = "single";
  columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ];
  rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
  onSelectionChanged() {
    var selectedRows = this.gridApi.getSelectedRows();
    var selectedRows1 = this.gridApi1.getSelectedRows();
    console.log(selectedRows);
    console.log(selectedRows1);
  }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  onGridReady1(params) {
    this.gridApi1 = params.api;
    this.gridColumnApi1 = params.columnApi;
  }

I am a able to get both value of grid in onSelectionChanged() method

Here is the output screen

enter image description here Hope this will help you

let me know if you have any issue with above

thanks

Upvotes: 3

Qortex
Qortex

Reputation: 7466

Your code looks fine. You just did a typo: replace @ViewChild('agGrid'... with @ViewChild('agGrid1'... since that's the name you put in the HTML template.

Upvotes: 0

Related Questions