I am trying to register to the scroll event (get notified when new rows appear) like this:
$scope.$on('ngGridEventRows', function (event, rows) {
console.log("Scroll")
});
But it does not fire.. (angular ui-grid version: v3.0.6)
What would be the correct way to achieve it?
Im not sure about their native events, but you could create your own watcher for their scrolling-event.
In this Plunkr I made a watcher that broadcasts on scroll.
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
$scope.$watch('gridApi.grid.isScrollingVertically', watchFunc);
function watchFunc(newData) {
if(newData === true) {
$rootScope.$broadcast('scrolled');
}
}
};
And your receiver
app.controller('SecondCtrl', ['$scope', function ($scope){
$scope.$on('scrolled', function(event, args) {
console.log('was scrolled');
});
}]);
Plunkr was created from their Grid Scrolling tutorial.
If you want more exact data about the scroll (i.e. the actual scroll event), you can instead wrap the grid in a directive. I will not include a template here, since the link config is the crucial part:
angular.module('my-app').directive('myGrid', function($timeout) {
return {
restrict: 'E',
template: "<div><ui-grid></ui-grid></div>",
link: function($scope, $element, $attributes) {
$timeout(function() {
$('div.ui-grid-viewport').on('scroll', function() {
// Your event handling here
});
});
}
};
});
$scope.$watch("gridApi.grid.isScrollingHorizontally",function(){
//your code
});
