CODEWITHSUNDEEP
javascriptangulartypescriptgridag-grid
user3340300
user3340300

Reputation: 67

ag-grid onGridReady not working

I want to load ag-grid inside a button click. I have tried two approaches but none is working

My code : First Method

 onBtnClick(){
    this.gridOptions ={
        onGridReady : function(){
            console.log("print");
        }
    }
}

Second method:

onBtnClick(){
    this.onGridReady();
}
onGridReady(){
   this.gridApi = params.api;
    console.log("print");
}

First method not working. Second method says api is not defined

Upvotes: 3

Views: 17051

Answers (3)

Sebastian
Sebastian

Reputation: 878

You should share more of you code, it's unclear what you are doing.

You must make sure your gridOptions are fully set up BEFORE the grid initializes. (Doing this on a button is too late)

ngOnInit(): void {
  this.gridOptions.onGridReady = gridReadyHandler;
}
gridReadyHandler = (params: GridReadyEvent) => {
  this.gridApi = params.api;
  console.log("grid is done loading", this.gridApi);
}

Upvotes: 0

Jöcker
Jöcker

Reputation: 6808

Have you checked if ag-gridis connected to onGridReady?

It should look something like that:

<ag-grid-angular
 ...
 (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

Upvotes: 0

Paritosh
Paritosh

Reputation: 11588

You can have this approach.

  1. Have a flag in your component when to display the grid.
  2. Use this flag to conditionally display the grid using *ngIf
  3. Set this flag value on button click

This way, the template having ag-grid won't be rendered until the flag is set. When it's set, the template will be rendered and onGridReady will be called.

<button (click)="btnClick()">Display grid</button>
<ag-grid-angular *ngIf="displayGrid"
  #agGrid
  ......
></ag-grid-angular>


btnClick(){
  this.displayGrid = true;
}

Check this working example: ag-grid display on button click

Upvotes: 3

Related Questions