CODEWITHSUNDEEP
angulartypescriptag-gridag-grid-ng2
Philipp Januskovecz
Philipp Januskovecz

Reputation: 898

Angular4 ag-Grid: API of GridOptions is undefined

I am using the free Version of ag-Grid in my Angular 4 Application.

In the following code I want to resize the grid automatically in the constructor:

constructor(private modalService: NgbModal) {
    this.gridOptions = <GridOptions>{};

    const columnDefs = [...];
    const rowData = [...];

    this.gridOptions.columnDefs = columnDefs;
    this.gridOptions.rowData = rowData;

    this.gridOptions.api.sizeColumnsToFit();
}

But in the Developer-Tools I get the following Error:

ERROR TypeError: Cannot read property 'sizeColumnsToFit' of undefined

Upvotes: 2

Views: 9005

Answers (5)

colossatr0n
colossatr0n

Reputation: 2375

Assign your gridOptions.api to the event.api in the onGridReady callback:

// gridOptions as a component field

gridOptions = {
    onGridReady(event: GridReadyEvent) {
        this.api = event.api
    }
}

Then you'll have access to the api through this.gridOptions.api once the grid is ready. Also, make sure you don't use an arrow function (lambda), or else this will refer to the component and not the gridOptions.

Upvotes: 0

Michael
Michael

Reputation: 101

create binding for grid options and grid ready in html:

  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"

Define an empty grid options variable in your component:

gridOptions: GridOptions = {}

And then in grid ready you can use the grid options:

onGridReady(params) {
  this.gridOptions.isExternalFilterPresent  =  this.isExternalFilterPresent.bind(this)
  this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)   
}

Upvotes: 0

Dinesh Khetarpal
Dinesh Khetarpal

Reputation: 372

sometimes instead of this.gridOptions.api.setColumnDef use this.gridOptions.columnDef = [] fixes the issue

Upvotes: 0

Paul
Paul

Reputation: 165

Hook the api functions to the Api object on the onGridReady event, wich you need to set in the Constructor...

 constructor() {
    this.gridOptions = <GridOptions>{
      onGridReady: () => {
        this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler);
      }
    };

myRowClickedHandler(event) {
     this.createdDate = event.data.createdDate;
}

Upvotes: 1

Jarod Moser
Jarod Moser

Reputation: 7348

The gridOptions.api is only available after you have created a new agGrid.Grid instance. For example:

this.gridOptions = <GridOptions>{};
//just an empty object right now

const columnDefs = [...];
const rowData = [...];

this.gridOptions.columnDefs = columnDefs;
this.gridOptions.rowData = rowData;
// all the gridOptions has right now is columnDefs and rowData attributes

this.gridOptions.api.sizeColumnsToFit();

//wherever you create the grid instance...
new agGrid.Grid(gridDiv, gridOptions)
//now the gridOptions object that you created has been filled out
//     with the api and columnApi attributes and functions

Upvotes: 0

Related Questions