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.

Benempt

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

Shippy

Thank you @PauL, that works! A follow up question, how to let the myFunction() only execute when a filter text is entered AND grid render is completed. Now myFunction() will be executed every time the grid changes, like in grouping, expand and collapse the grid will also trigger the myFunction(). Thank you again for your time. – Benempt

You could also listen for filterChanged, and you could set a flag + a timeout that will unset that flag. Then you could check for that flag in rowsRendered. Alternatively, you could just not worry and let your function run whenever rowsRendered is emitted. – Shippy

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.

Benempt