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 :)

Dafodil

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

Tommie

Answer 2

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};

function registerGridApi(gridApi) {
            $scope.gridApi = gridApi;
}

Get your total items :

var totalItems = $scope.gridApi.grid.options.totalItems;

Stanford

Answer 3

You can use this workaround.

var RowsVisible = $(".ui-grid-row").length;

If grouping is there then use this var RowsVisible = $(".ui-grid-row").length/2;

This will give you how many rows present. If grouping is there, then it will give you the the number of headings and the visible rows.

Demisemiquaver

Answer 4

getVisibleRows() will return the number of visible rows. In case if You expand grouping, the size of getVisibleRows() will increase accordingly.

  $scope.gridApi.core.getVisibleRows().length;

Therefore above approach has some limitations.

You can also get total grouped rows by using following approach.

 var totalGroupedRows = Object.keys($scope.gridApi.grid.grouping.groupingHeaderCache).length ;

Note Object.keys() will not work IE<9.

Desiccator

Answer 5

In our application, we are showing some of the columns in the footer. It was not working with the column filter. We then did the below steps, then it worked.

i.$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
}
ii. calling below template in the footer
footerCellTemplate: '<div class="footer-class" style="text-align:right;margin-right: 5px;" >{{grid.appScope.getTotalofcolumn(grid) | currency:number:0}}</div>',
iii. inside getTotalofcolumn used below line for rows                       
$scope.gridApi.core.getVisibleRows();

$scope.totalValues =$scope.gridApi.core.getVisibleRows();
                    $scope.Total = 0
                    angular.forEach($scope.totalValues,function(value,key){
                        $scope.Total +=  value.entity.TotalCOLUMNVALUE/NAME;
                    }); 
                    return $scope.Total;

Austinaustina