How to get notified when grid changed in AngularJS ui-grid?

Question

If there is a way in ui-grid that I can know a grid is finish updating the rows?(like a filter is being applied etc)? I want to run some function after the grid view changes.

I tried the following method:

$scope.filteredRows = $scope.gridApi.core.getVisibleRows($scope.gridApi.grid);

$scope.$watch('filteredRows', function(){console.log('view updated');});

The above approach works when the grid just finish initiating, after that, it won't work anymore.

I also tried using the filterChanged api:

$scope.gridApi.core.on.filterChanged($scope, function() {
    console.log('filter changed');
    foo();
});

The problem with this method is that although I can get notified when the filter is changed, but if the grid is very large, it needs some time to finish updating the view, and before that, the function foo() is being called before the grid update is finished.

Any idea will be appreciated.

Answer 1

I've seen use of $scope.grid.api.core.on.rowsRendered( $scope, $scope.col.updateAggregationValue ); in ui-grid-footer-cell.js. I'm not sure exactly when rowsRendered fires, but given it's being used to calculate aggregations and aggregations require knowledge whenever the rows are changed, and must run after the rowsProcessors finish running, there's a good chance that it's what you want.

EDIT: the framework to use it would be:

1. Define a function that you want to call when the visible rows have changed

   var myFunction = function() { do some stuff };

2. Set this function to be called whenever rows are rendered

   $scope.gridApi.core.on.rowsRendered( $scope, myFunction );

Answer 2

Well, I found a workaround, in order to call the function after the grid is updated, which takes some time, I added a delay in filterChanged event:

$scope.gridApi.core.on.filterChanged($scope, function() {
    console.log('filter changed');
    $timeout(foo(),800);
});

To use the $timeout, you need to add that to your controller first.