ag-grid API Undefined in Angular 2

Question

I am using the ag-grid API in an Angular 2 app, inside the ngOnInit method.

In the onGridReady event like mentioned in this post, the API is accessible and things work fine.

However, I need to call the API in one of the following methods as well:

onRowDataChanged
onNewColumnsLoaded
onModelUpdated

This is not working because the API is undefined. In addition, for some reason I can also call the API in the onCellDoubleClicked and onCellClicked events.

This seem to be a bug. Does anyone know what is going on?

Please see the code bellow:

ngOnInit() {

    this.gridOptions = <GridOptions>{

        onGridReady: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onCellDoubleClicked: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onRowDataChanged: function (param) {
            param.api.sizeColumnsToFit(); // API is undefined
        },
    };
}

You can see my solution here: stackoverflow.com/a/44094147/2372205 — Guenther
– Guenther, Commented May 21, 2017 at 7:33

GSS · Accepted Answer · 2017-02-22 10:41:02Z

1

Alright, here is how I got it working.

First, capture the this reference for your angular component just to make sure that you will not have JavaScript scoping issues.
Then, capture the API reference when it is available inside the onGridReady event
Lastly, only call the API after the stack is empty, deferring all the API calls with the setTimeout function

So now the code looks more or less like this:

...
let self = this;
...
onGridReady: function (param) {
    self.api = param.api;
},

onRowDataChanged: function (param) {
    setTimeout(() => {
        self.api.sizeColumnsToFit()
        ...more API calls...
    }, 0);
},
...

answered Feb 22, 2017 at 10:41

GSS

211 silver badge6 bronze badges

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

Comments

yaya · Accepted Answer · 2020-08-29 12:20:04Z

0

When there is an issue, ag grid will not create api properly, so api will be undefined.

In my case, there was an error in console about i forgot to import 'ag-grid-enterprise' (i was using rowModelType: 'serverSide'), so it fails to init.

So check if the options are valid and if it gives you any error on console.

answered Aug 29, 2020 at 12:20

yaya

8,3311 gold badge48 silver badges44 bronze badges

Collectives™ on Stack Overflow

ag-grid API Undefined in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related