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.

Maxim Shoustin · Accepted Answer · 2015-11-22 14:14:24Z

11

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:

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

var myFunction = function() { do some stuff };
Set this function to be called whenever rows are rendered

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

edited Nov 22, 2015 at 14:14

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

answered May 27, 2015 at 20:46

PaulL

6,6503 gold badges37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tony Over a year ago

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.

PaulL Over a year ago

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.

Tony · Accepted Answer · 2015-05-28 15:04:38Z

1

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.

answered May 28, 2015 at 15:04

Tony

1,4453 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related