fix(GridRenderContainer.js): needsHScrollbarPlaceholder accounts for …

…WHEN_NEEDED Added logic to needsHScrollbarPlaceholder to account for left/right rendercontainers as well as handle case when gridOption enableHorizontalScrollbar is set to WHEN_NEEDED. fix #6280, fix #5812, fix #5760, fix #6590, fix #6572, fix #6528, fix #4251, fix #3022
angular-ui · Mar 19, 2018 · 403bf3e · 403bf3e
1 parent 9ebe116
commit 403bf3e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 11 deletions.
diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js
@@ -190,11 +190,11 @@ angular.module('ui.grid')
 
     self.scrollbarHeight = 0;
     self.scrollbarWidth = 0;
-    if (self.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.ALWAYS) {
+    if (self.options.enableHorizontalScrollbar !== uiGridConstants.scrollbars.NEVER) {
       self.scrollbarHeight = gridUtil.getScrollbarWidth();
     }
 
-    if (self.options.enableVerticalScrollbar === uiGridConstants.scrollbars.ALWAYS) {
+    if (self.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER) {
       self.scrollbarWidth = gridUtil.getScrollbarWidth();
     }
 

diff --git a/src/js/core/factories/GridRenderContainer.js b/src/js/core/factories/GridRenderContainer.js
@@ -764,7 +764,17 @@ angular.module('ui.grid')
   };
 
   GridRenderContainer.prototype.needsHScrollbarPlaceholder = function () {
-    return this.grid.options.enableHorizontalScrollbar && !this.hasHScrollbar && !this.grid.disableScrolling;
+    var self = this,
+      containerBody;
+
+    if (self.name === 'left' || self.name === 'right' && !this.hasHScrollbar && !this.grid.disableScrolling) {
+      if (self.grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.ALWAYS) {
+        return true;
+      }
+      containerBody = this.grid.element[0].querySelector('.ui-grid-render-container-body .ui-grid-viewport');
+      return containerBody.scrollWidth > containerBody.offsetWidth;
+    }
+    return false;
   };
 
   GridRenderContainer.prototype.getViewportStyle = function () {

diff --git a/test/unit/core/factories/Grid.spec.js b/test/unit/core/factories/Grid.spec.js
@@ -1,10 +1,12 @@
 describe('Grid factory', function () {
-  var $timeout, $q, $scope, grid, Grid, GridRow, GridColumn, rows, returnedRows, column, uiGridConstants, gridClassFactory;
+  var $timeout, $q, $scope, grid, Grid, GridRow, GridColumn, rows, returnedRows, column, uiGridConstants,
+    gridClassFactory, gridUtil;
 
   beforeEach(function() {
     module('ui.grid');
 
-    inject(function (_$timeout_, _$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_, _gridClassFactory_) {
+    inject(function (_$timeout_, _$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_,
+                     _gridClassFactory_, _gridUtil_) {
       $timeout = _$timeout_;
       $q = _$q_;
       $scope = _$rootScope_;
@@ -13,6 +15,7 @@ describe('Grid factory', function () {
       GridColumn = _GridColumn_;
       uiGridConstants = _uiGridConstants_;
       gridClassFactory = _gridClassFactory_;
+      gridUtil = _gridUtil_;
     });
     grid = new Grid({ id: 1 });
     rows = [
@@ -47,9 +50,9 @@ describe('Grid factory', function () {
     var canvasWidth = 100;
 
     beforeEach(function() {
-      renderContainers = { 
-        body: { 
-          visibleRowCache: null, 
+      renderContainers = {
+        body: {
+          visibleRowCache: null,
           visibleColumnCache: null,
           prevScrollTop: prevScrollTop,
           headerHeight: 30,
@@ -99,7 +102,7 @@ describe('Grid factory', function () {
       });
 
       $scope.$apply();
-    });    
+    });
   });
 
   describe('constructor', function() {
@@ -123,6 +126,32 @@ describe('Grid factory', function () {
         expect(e).toMatch(/It must follow CSS selector syntax rules/);
       }
     });
+    describe('scrollbarHeight and scrollbarWidth', function() {
+      describe('when enableHorizontalScrollbar not equal to NEVER', function() {
+        it('should set scrollbarHeight and scrollbarWidth', function() {
+          var grid = new Grid({
+            id: 1,
+            enableHorizontalScrollbar: uiGridConstants.scrollbars.ALWAYS,
+            enableVerticalScrollbar: uiGridConstants.scrollbars.ALWAYS
+          });
+
+          expect(grid.scrollbarHeight).not.toEqual(0);
+          expect(grid.scrollbarWidth).not.toEqual(0);
+        });
+      });
+      describe('when enableHorizontalScrollbar is equal to NEVER', function() {
+        it('should set scrollbarHeight and scrollbarWidth to 0', function() {
+          var grid = new Grid({
+            id: 1,
+            enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
+            enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER
+          });
+
+          expect(grid.scrollbarHeight).toEqual(0);
+          expect(grid.scrollbarWidth).toEqual(0);
+        });
+      });
+    });
   });
 
   describe('row processors', function () {
@@ -278,8 +307,6 @@ describe('Grid factory', function () {
 
   });
 
-
-
   describe('buildColumns', function() {
     it('guess correct column types when not specified', function() {
       var dataRow = {str:'abc', num:123, dat:new Date(), bool:true, obj:{}, nll:null, negNum:-1, posNum:+1 };

diff --git a/test/unit/core/factories/GridRenderContainer.spec.js b/test/unit/core/factories/GridRenderContainer.spec.js
@@ -106,6 +106,55 @@ describe('GridRenderContainer factory', function() {
 
 	});
 
+  describe('needsHScrollbarPlaceholder', function() {
+    var r;
+
+    function initializeRenderContainer(scrollbarSetting, scrollWidth, offsetWidth) {
+      grid.element = [{
+        querySelector: function() {
+          return {
+            scrollWidth: scrollWidth,
+            offsetWidth: offsetWidth
+          };
+        }
+      }];
+      grid.options.enableHorizontalScrollbar = scrollbarSetting;
+      r = new GridRenderContainer('name', grid);
+    }
+    describe('body render container', function() {
+      it('should return false', function() {
+        initializeRenderContainer();
+        r.name = 'body';
+        expect(r.needsHScrollbarPlaceholder()).toEqual(false);
+      });
+    });
+
+    describe('left && right render containers', function() {
+      describe('grid options enableHorizontalScrollbar === ALWAYS', function() {
+        it('should return true', function() {
+          initializeRenderContainer(uiGridConstants.scrollbars.ALWAYS);
+          r.name = 'left';
+          expect(r.needsHScrollbarPlaceholder()).toEqual(true);
+
+          r.name = 'right';
+          expect(r.needsHScrollbarPlaceholder()).toEqual(true);
+        });
+      });
+      describe('grid options enableHorizontalScrollbar === WHEN_NEEDED', function() {
+        it('should return true if body render container is scrollable', function () {
+          initializeRenderContainer(uiGridConstants.scrollbars.WHEN_NEEDED, 100, 50);
+          r.name = 'left';
+          expect(r.needsHScrollbarPlaceholder()).toBe(true);
+        });
+        it('should return false if body render container is not scrollable', function () {
+          initializeRenderContainer(uiGridConstants.scrollbars.WHEN_NEEDED, 50, 100);
+          r.name = 'left';
+          expect(r.needsHScrollbarPlaceholder()).toBe(false);
+        });
+      });
+    });
+  });
+
 	describe('updateWidths', function() {
 		beforeEach(function() {
 			grid.buildColumns();