experiment with faster scrolling

misc/tutorial/401_AllFeatures.ngdoc

@@ -13,13 +13,15 @@ All features are enabled to get an idea of performance
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.edit', 'ui.grid.resizeColumns', 'ui.grid.pinning', 'ui.grid.selection', 'ui.grid.moveColumns']);
 
-    app.controller('MainCtrl',  ['$scope', '$http', '$timeout', '$interval', function ($scope, $http, $timeout, $interval) {
+    app.controller('MainCtrl',  ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants',
+    function ($scope, $http, $timeout, $interval, uiGridConstants) {
 
       $scope.gridOptions = {};
       $scope.gridOptions.data = 'myData';
       $scope.gridOptions.enableColumnResizing = true;
       $scope.gridOptions.enableFiltering = true;
       $scope.gridOptions.enableGridMenu = true;
+      $scope.gridOptions.showFooter = true;
 
       $scope.gridOptions.rowIdentity = function(row) {
         return row.id;
@@ -31,7 +33,8 @@ All features are enabled to get an idea of performance
       $scope.gridOptions.columnDefs = [
         { name:'id', width:50 },
         { name:'name', width:100 },
-        { name:'age', width:100, enableCellEdit: true, cellTemplate: '<div class="ui-grid-cell-contents"><span>Age:{{COL_FIELD}}</span></div>'   },
+        { name:'age', width:100, enableCellEdit: true, cellTemplate: '<div class="ui-grid-cell-contents"><span>Age:{{COL_FIELD}}</span></div>',
+          aggregationType: uiGridConstants.aggregationTypes.avg },
         { name:'address.street', width:150, enableCellEdit: true, cellTemplate: '<div class="ui-grid-cell-contents"><span>Street:{{COL_FIELD}}</span></div>'   },
         { name:'address.city', width:150, enableCellEdit: true, cellTemplate: '<div class="ui-grid-cell-contents"><span>City:{{COL_FIELD}}</span></div>'  },
         { name:'address.state', width:50, enableCellEdit: true, cellTemplate: '<div class="ui-grid-cell-contents"><span>State:{{COL_FIELD}}</span></div>'  },

src/js/core/directives/ui-grid-viewport.js

@@ -1,6 +1,27 @@
 (function(){
   'use strict';
 
+  //https://coderwall.com/p/d_aisq/speeding-up-angularjs-s-digest-loop
+  angular.module('ui.grid').directive('uiGridSuspendable', function () {
+    return {
+      link: function (scope) {
+        // FIXME: this might break is suspend/resume called out of order
+        // or if watchers are added while suspended
+        var watchers;
+
+        scope.$on('suspend', function () {
+          watchers = scope.$$watchers;
+          scope.$$watchers = [];
+        });
+
+        scope.$on('resume', function () {
+          scope.$$watchers = watchers;
+          watchers = void 0;
+        });
+      }
+    };
+  });
+
   angular.module('ui.grid').directive('uiGridViewport', ['gridUtil',
     function(gridUtil) {
       return {
@@ -31,6 +52,11 @@
           containerCtrl.viewport = $elm;
 
           $elm.on('scroll', function (evt) {
+
+
+
+
+
             var newScrollTop = $elm[0].scrollTop;
             // var newScrollLeft = $elm[0].scrollLeft;
             var newScrollLeft = gridUtil.normalizeScrollLeft($elm);
@@ -75,6 +101,10 @@
               }
               uiGridCtrl.fireScrollingEvent(args); 
             }
+
+            $scope.$broadcast('suspend');
+            $scope.$digest();
+            $scope.$broadcast('resume');
           });
         }
       };

src/templates/ui-grid/uiGridViewport.html

@@ -1,6 +1,6 @@
 <div class="ui-grid-viewport">
   <div class="ui-grid-canvas">
-    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
+    <div ui-grid-suspendable ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
       <div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
     </div>
   </div>