Angular UI-Grid: How to get number of total items after filtering

Question

I am using UI Grid to display some data. One of the columns is text so I have 'contains' filtering which works perfectly.

I am also using pagination. The right corner of the UI-Grid shows something like:

1 - 23 of 23 items

In my page functionality (angular controller side), I need to return the number of total items, specifically the last "23" from that line. I could not find anything in the documentation other than this (from the docs):

GridOptions (api in module ui.grid.pagination )

totalItems Total number of items, set automatically when client side pagination, needs set by user for server side pagination"

So I tried using $scope.gridOptions.totalItems but unfortunately it always returns 0 when the page first loads.

My workaround was using data.length which would give me what I needed. After further testing though I realized that after you use the filtering, the total items on the pagination footer changes to the sum of the matching results. I have not found another way to get that number.

One more thing: Is there an event that fires after filtering is complete so that I can check $scope.gridOptions.totalItems then?

Any ideas? Thanks in advance :)

Answer 1

You should avoid jQuery (as another post suggests) and interact with the API instead.

You first need to save a reference to the API on the grids creation event.

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};
function registerGridApi(gridApi) {
    $scope.gridApi = gridApi;
}

You should already know the total number of rows.

You can get the number of visible/filtered rows with:

gridApi.core.getVisibleRows().length

or

gridApi.grid.getVisibleRows().length

You can get the number of selected rows with:

gridApi.selection.getSelectedRows().length