How to initialize ag-grid api in angular2 application

Question

I am working on an application built using angular2 with typescript. I am using ag-grid to display data in grid but not able to find the grid api.

/// <reference path="../../../typings/jquery/jquery.d.ts" />


import {Component} from 'angular2/core';
import {Hero, HeroService}   from './hero.service';
var gridOptions;
var heroService;
import * as core from 'angular2/core';
declare var ag: any;
ag.grid.initialiseAgGridWithAngular2({ core: core });
@Component({
    selector: 'gridapp',
    template: `<ag-grid-ng2 #gapp class="ag-fresh" style="height: 300px; width:850px" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableSorting="true" enableColResize="true" enableFilter="true"></ag-grid-ng2>`,
    directives: [(<any>window).ag.grid.AgGridNg2],
    providers: [HeroService]
})
export class GridViewComponent {

    private columnDefs: Object[];
    private rowData: Object[];



    constructor(private _heroService: HeroService) {
        console.log("in Grid constructor...");
        heroService = this._heroService;
        this.columnDefs = [
            { headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
            { headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false },

        ];

        heroService.getHeroes()
                .then(heroes =>
                    this.rowData = heroes
        );

        gridOptions = {
            enableSorting: true,
            rowData: this.rowData,
            columnDefs: this.columnDefs,
            onReady: function() {
                gridOptions.api.sizeColumnsToFit();
                alert(gridOptions.api);
            }

        }


    }


}

Now when I am trying to execute any method of this.gridOptions.api it is throwing error that "gridOptions.api is undefined. Examples mentioned on ag-grid site are not working for typescript and angular2.

How can I initialize and use gridApi in angular2 with typescript?

Have you considered PrimeNG DataTable? It is a native component for Angular2. primefaces.org/primeng/#/datatable — Cagatay Civici
– Cagatay Civici, Commented Mar 9, 2016 at 16:24

Matrim · Accepted Answer · 2016-06-03 13:20:42Z

The above 'almost' got me there in ang 2 rc1 but I found i needed the Grid Options link in the html as well so

<ag-grid-ng2 id="mastergrid" #agGrid style="height: 100%; width:100%" class="ag-fresh"
         [gridOptions]="gridOptions" 
                [columnDefs]="columnDefs" 
                [showToolPanel]="showToolPanel" 
                [rowData]="rowData" 
                enableSorting 
                enableRangeSelection:true
                suppressRowClickSelection
                enableFilter  
                toolPanelSuppressValues 
                toolPanelSuppressGroups
                debug="false"
                draggable="false"
                rowHeight="22" 
                rowSelection='multiple'> 
        </ag-grid-ng2>

and

ngOnInit(){
     this.gridOptions = <GridOptions>{
        onGridReady: () => {
             this.gridOptions.api.sizeColumnsToFit();
         }
     };
 }

this worked perfectly and the grid resized as the window moved. Thanks to dfsq as I would not have used the handy onGridReady either :)

dfsq · Accepted Answer · 2016-02-08 07:30:10Z

3

You want to initialize gridOptions as a property of the class, not just a variable. So it should be this.gridOptions:

constructor(private _heroService: HeroService) {

    console.log("in Grid constructor...");

    this.columnDefs = [
        { headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
        { headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false }
    ];

    this._heroService.getHeroes().then(heroes => this.rowData = heroes);

    this.gridOptions = {
        enableSorting: true,
        rowData: this.rowData,
        columnDefs: this.columnDefs,
        onReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
            alert(this.gridOptions.api);
        }
    }
}

answered Feb 8, 2016 at 7:30

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

crucifery Over a year ago

For tricky auto-height out of the box, use domLayout='autoHeight' in your template where <ag grid-ng2 ... domLayout='autoHeight'></ag-grid-ng2>

Malindu Sandaruwan · Accepted Answer · 2018-07-19 05:38:56Z

0

In your ts file there is a gridOptions variable declared in class level. var gridOptions; But you are not assigning any value for it. So it's undefined.

Inside the constructor you are assigning a value for a gridOptions variable which is local to that method.

However the gridOptions you have bind with grid is the class level variable which is undefined. So you are getting an error. So modify the code like follows.

constructor(private _heroService: HeroService) {
    ....
    this.gridOptions = {
        enableSorting: true,
        rowData: this.rowData,
        ....

answered Jul 19, 2018 at 5:38

Malindu Sandaruwan

1,5173 gold badges15 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to initialize ag-grid api in angular2 application

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related