How can I get an event when angularjs ui-grid scroll bar reaches the end

Question

I want to display a button when the scroll bar reaches the end of the result in angular ui grid v3.

What I was thinking was to attach an event on scroll using directive, but ui grid is a directive itself and I cannot get its scroll length and height because the data is not loaded at that moment.

If anyone can give me the hint about how this problem can be solved, it would me much appreciated. Thanks

Answer 1

This is not the complete solution but it might get you started.

I attached to scrollEnd event and was able to check for the y-position. I did not find a way yet to calculate the bottom of the viewport, thats why I just put a arbitrary 2000 value there.

You might check scrollToIfNecessary in https://github.com/angular-ui/ui-grid/blob/a42dab24532fb896725b9fc8359e4526e436c891/src/js/core/factories/Grid.js to calculate the real height of the grid. It is definitely no easy calculation.

http://plnkr.co/edit/hluhWCZz05WB0Itdumbf?p=preview

   gridApi.core.on.scrollEnd($scope,function(row){

        if( row.newScrollTop > 2000) alert('far down south');

      });

Answer 2

The following lets you detect if the user has scrolled all the way to the right and/or bottom of the grid. Just insert the necessary handlers. You achieve it by wrapping it in a directive, and then tapping into the native scroll events.

Please note that I am not a JQuery expert, so there most certainly is a better way than repeating the selector.

angular.module('myGridApp')
  .directive('myGrid', function($timeout) {
    return {
      restrict: 'E',
      scope: { data: '=' },
      template: "<div><ui-grid></ui-grid></div>",
      link: function($scope, $element, $attributes) {

        $timeout(function() {
          var maxHorizontalScroll = $('div.ui-grid-viewport')[0].scrollWidth - $('div.ui-grid-viewport')[0].clientWidth;
          var maxVerticalScroll = $('div.ui-grid-viewport')[0].scrollHeight - $('div.ui-grid-viewport')[0].clientHeight;
          $('div.ui-grid-viewport').on('scroll', function(par, arg) {
            var currentHorizontalScroll = $('div.ui-grid-viewport').scrollLeft();
            var currentVerticalScroll = $('div.ui-grid-viewport').scrollTop();

            if(currentHorizontalScroll >= maxHorizontalScroll) {
              // User has scrolled as far to the right as possible
            }

            if(currentVerticalScroll >= maxVerticalScroll) {
              // User has scrolled as far to the bottom as possible
            }
          });
        });
      }
    };
  });