Get filtered rows from Angular ui-grid with pagination

We have various aggregationTypes in ui-grid (3.2.6). I am using ‘sum’ aggregationType to display total to the column footer. But it seems that when I’m using filter and pagination together in ui-grid, my column sum is always calculate on only visible rows.

For example let’s say I have applied some filter and I got 23 filtered rows out of 30 rows. And I have pagination with 10 rows per page. In this case my sum calculate on only first 10 filtered rows. I want to display sum of all filtered 23 rows. How I get it??

To fix this, I tried to find out that is there any configuration settings available in aggregationTypes?. But I didn’t get anything in documentation. May be there is something we can achieve this by using custom aggregation but I’m not much familiar with it. So I tried some other workaround and I got answer on stackoverflow – 36047012.

On stackoverflow answer, they mentioned that try to use the rowsVisibleChanged event together with the filterChanged event. You have to use both because if you use the filterChanged event alone it won’t work since it’s launched before the rows are actually filtered. I use a flag variable (filterChanged) to know if a filter was modified. Please find solution below:

var filterChanged = false;

$scope.gridApi.core.on.filterChanged($scope, function() {
    filterChanged = true;
});

$scope.gridApi.core.on.rowsVisibleChanged($scope, function() {
    if(!filterChanged){
        return;
    }
    filterChanged = false;
    // The following line extracts the filtered rows
    var filtered = _.filter($scope.gridApi.grid.rows, function(o) { return o.visible; });
    var entities = _.map(filtered, 'entity'); // Entities extracted from the GridRow array
    $scope.total = _.sumBy(entities, function(o) {
        return parseInt(o.price);
    });
});

That’s it!!! I got my solution that first I will get the filtered rows and then use lodash library to get the sum on particular column and store it in $scope variable and display it to the particular column’s footer template.

I have implement the above solution in my code and it’s works well when I apply some filter on any column. But sum not updated while I clear previously applied filter by clicking ‘X’ icon. After debugging the code I found that rowVisibleChanged event not fired after filter is cleared. I think this is an issue with ui-grid. Also I got the same open issue on github – 3901.

Now I started looking on comments on github issue#3901, and I found comment that make it to work using rowRendered event. This comment from Ruslan Stelmachenko. Thanks Ruslan Stelmachenko :).

Now I got it and please find out the working Plunker here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s