CODEWITHSUNDEEP
ag-grid
EduBw
EduBw

Reputation: 942

Row Count in AgGrid

I want show the row count in my AgGrid, but I got a problem.

    ngOnInit() { 
      console.log(this.gridOptions.api.getDisplayedRowCount());
    }

Error:

ERROR TypeError: Cannot read property 'getDisplayedRowCount' of undefined
    at ProjectListComponent.webpackJsonp../src/app/project-list/project-list.component.ts.ProjectListComponent.ngOnInit (project-list.component.ts:178)
    at checkAndUpdateDirectiveInline (core.js:12411)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (ProjectListComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)

Api the AgGrid:

getDisplayedRowCount()  Returns the total number of displayed rows.

I don't understand why I have this problem...

Upvotes: 8

Views: 53093

Answers (2)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20088

If you use ag-grid react component then use the below procedure to get the count

<AgGridReact
    columnDefs={columnDefs}
    rowData={rowData}
    defaultColDef={defaultColDef}
    onGridReady={onGridReady}
></AgGridReact>


const onGridReady = (params) => {
        setRow(params.api.getDisplayedRowCount());
    };

Upvotes: 0

Fabian
Fabian

Reputation: 393

(You mention ngOnInit so I assume you are using Angular)
The problem is that the api is not available in ngOnInit. You should listen for the gridReady event if you need the grid api.

gridReady: ag-Grid has initialised. Use this event if, for example, you need to use the grid's API to fix the columns to size. Documentation

html:

<ag-grid-angular   style="width: 100%; height: 372px;"
  (gridReady)="onGridReady()">
</ag-grid-angular>

component ts:

onGridReady(params: any) {
  console.log('grid ready');
  console.log(this.gridOptions.api.getDisplayedRowCount());
}

You should also keep in mind that there is a note on this site:

Sometimes the gridReady grid event can fire before the Angular component is ready to receive it, so in an Angular environment its safer to rely on AfterViewInit instead before using the API.

Despite that I never had any problems using the gridReady event.

Upvotes: 17

Related Questions