Feature[Core] Viewport's native scrollbars are now used instead of a separate div containing a scrollbar. results in better positioning of scrollbar and eliminates scrollbar positioning calculations

Author: swalters

src/js/core/directives/ui-grid-native-scrollbar.js

@@ -282,8 +282,8 @@
           }
         }
 
-        var gridScrollDereg = $scope.$on(uiGridConstants.events.GRID_SCROLL, gridScroll);
-        $scope.$on('$destroy', gridScrollDereg);
+     //   var gridScrollDereg = $scope.$on(uiGridConstants.events.GRID_SCROLL, gridScroll);
+     //   $scope.$on('$destroy', gridScrollDereg);
 
 
 

src/js/core/directives/ui-grid-render-container.js

@@ -68,9 +68,9 @@
             $elm.addClass('ui-grid-render-container-' + $scope.containerId);
 
             // Bind to left/right-scroll events
-            var scrollUnbinder;
+            var scrollUnbinder = function() {};
             if ($scope.bindScrollHorizontal || $scope.bindScrollVertical) {
-              scrollUnbinder = $scope.$on(uiGridConstants.events.GRID_SCROLL, scrollHandler);
+              //scrollUnbinder = $scope.$on(uiGridConstants.events.GRID_SCROLL, scrollHandler);
             }
 
             function scrollHandler (evt, args) {
@@ -404,6 +404,7 @@
             $scope.rowContainer.visibleRowCache[$scope.rowContainer.currentTopRow].height;
 
           // return { 'margin-top': hiddenRowWidth + 'px' };
+          //gridUtil.logDebug('margin-top ' + hiddenRowWidth );
           styles['margin-top'] = hiddenRowWidth + 'px';
         }
       }

src/js/core/factories/Grid.js

@@ -1364,7 +1364,7 @@ angular.module('ui.grid')
 
     viewPortHeight = viewPortHeight + adjustment.height;
 
-    // gridUtil.logDebug('viewPortHeight', viewPortHeight);
+    //gridUtil.logDebug('viewPortHeight', viewPortHeight);
 
     return viewPortHeight;
   };
@@ -1382,7 +1382,7 @@ angular.module('ui.grid')
 
     viewPortWidth = viewPortWidth + adjustment.width;
 
-    // gridUtil.logDebug('getviewPortWidth', viewPortWidth);
+    //gridUtil.logDebug('getviewPortWidth', viewPortWidth);
 
     return viewPortWidth;
   };
@@ -1799,6 +1799,28 @@ angular.module('ui.grid')
     }
   };
 
+    /**
+     * @ngdoc function
+     * @name hasLeftContainerColumns
+     * @methodOf ui.grid.class:Grid
+     * @description returns true if leftContainer has columns
+     */
+    Grid.prototype.hasLeftContainerColumns = function () {
+      return this.hasLeftContainer() && this.renderContainers.left.renderedColumns.length > 0;
+    };
+
+    /**
+     * @ngdoc function
+     * @name hasRightContainerColumns
+     * @methodOf ui.grid.class:Grid
+     * @description returns true if rightContainer has columns
+     */
+    Grid.prototype.hasRightContainerColumns = function () {
+      return this.hasRightContainer() && this.renderContainers.right.renderedColumns.length > 0;
+    };
+
+
+
 
   // Blatantly stolen from Angular as it isn't exposed (yet? 2.0?)
   function RowHashMap() {}

src/js/core/factories/GridRenderContainer.js

@@ -687,6 +687,34 @@ angular.module('ui.grid')
     this.columnStyles = ret;
   };
 
+  GridRenderContainer.prototype.getViewPortStyle = function () {
+    var self = this;
+    var styles = {};
+
+    if (self.name === 'body') {
+      styles['overflow-x'] = 'scroll';
+      if (self.grid.hasRightContainerColumns()) {
+        styles['overflow-y'] = 'hidden';
+      }
+      else {
+        styles['overflow-y'] = 'scroll';
+      }
+    }
+    else if (self.name === 'left') {
+      styles['overflow-x'] = 'hidden';
+      styles['overflow-y'] = 'hidden';
+    }
+    else {
+      styles['overflow-x'] = 'hidden';
+      styles['overflow-y'] = 'scroll';
+    }
+
+    // if (self.grid.isRTL()) {
+
+    return styles;
+
+  };
+
   return GridRenderContainer;
 }]);
 

src/less/body.less

@@ -15,7 +15,6 @@
   // overflow: auto; // TODO(c0bra): turn back on when virtual repeater is hooked up
   min-height: 20px;
   position: relative;
-  overflow: hidden;
 
   :focus {
     outline: none;
@@ -24,6 +23,7 @@
 
 .ui-grid-canvas {
   position: relative;
+  padding-top:1px; //to prevent canvas from absorbing the 1st rendered row's margin
 }
 
 .ui-grid-row {

src/templates/ui-grid/uiGridRenderContainer.html

@@ -4,6 +4,6 @@
   <div ui-grid-footer ng-if="grid.options.showFooter"></div>
 
     <!-- native scrolling -->
-  <div ui-grid-native-scrollbar ng-if="enableVerticalScrollbar" type="vertical"></div>
-  <div ui-grid-native-scrollbar ng-if="enableHorizontalScrollbar" type="horizontal"></div>
+  <!--<div ui-grid-native-scrollbar ng-if="enableVerticalScrollbar" type="vertical"></div>-->
+  <!--<div ui-grid-native-scrollbar ng-if="enableHorizontalScrollbar" type="horizontal"></div>-->
 </div>

src/templates/ui-grid/uiGridViewport.html

@@ -1,4 +1,4 @@
-<div class="ui-grid-viewport">
+<div class="ui-grid-viewport"  ng-style="containerCtrl.colContainer.getViewPortStyle()">
   <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-row="row" row-render-index="rowRenderIndex"></div>