angular - How to initialize ag-grid api in angular2 application -
i working on application built using angular2 typescript. using ag-grid display data in grid not able find grid api.
/// <reference path="../../../typings/jquery/jquery.d.ts" /> import {component} 'angular2/core'; import {hero, heroservice} './hero.service'; var gridoptions; var heroservice; import * core '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 trying execute method of this.gridoptions.api throwing error "gridoptions.api undefined. examples mentioned on ag-grid site not working typescript , angular2.
how can initialize , use gridapi in angular2 typescript?
you want initialize gridoptions
property of class, not variable. should 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); } } }
Comments
Post a Comment