How to call gridready event of AG-Grid on a click Handler function

Question

I am working on a project in my organization where I have to implement ag-grid .I know ag-grid has a gridready event function which fires initially and sets the params with all grid api properties . My rowdata is constantly changing which is coming from some other component ,I have added a handler (function) where I want to call gridready event again which sets my rowdata with the latest values . The problem is gridapi properties will be initialized only at 1st time ,I want to access those (gridapi) properties in my handler as well which is becoming undefined now ,how to access gridapi properties even after grid initialization and scope is lost. I don't have the exact code ,I have added some code snapshots which will describe my situation exactly.

grid.component.ts

@Input() gridData

ngOnit() { 
}

handler() { 
want to call grid ready but params will be undefined ,how to set this gridapi properties.
gridready()
}

gridready(params) {
this.gridapi =params.api;
this.columnapi =params.clumnapi
this.gridapi.setRowData(this.gridData.rowData)
}

Grace Liao Grace Liao · Accepted Answer · 2019-02-14T23:59:43

According to ag-Grid's documentation, the Grid API (both api and columnApi) will only be available after the gridReady event has been fired.

Here's an alternative way of achieving the same thing if I understood your problem correctly.

You can try adding a local variable, isGridAPIReady, in your own grid.component.ts to track that state.

Set isGridAPIReady to true when ag-grid GridReadyEvent fires.

And eventually set the new rowData using the grid api:

//grid.component.ts

@Input()
rowData: any[];

ngOnChanges(changes: SimpleChanges): void {
    if (this.isGridAPIReady && changes['rowData']) {
      this.gridOptions.api.setRowData(this.rowData);
    }
}

Hope it helps!

How to call gridready event of AG-Grid on a click Handler function

grid.component.ts

1 Answers