fix(Header): Hidden header height misplacement

A hidden header caused the scrollbar and viewport to be drawn lower and smaller than they should have been. Fixes #1995 BREAKING CHANGE: The `hideHeader` option has been changed to `showHeader` To migrate, change your code from the following: `hideHeader: true` To: `showHeader: false`
angular-ui · Dec 2, 2014 · 783fefb · 783fefb
1 parent 0991d20
commit 783fefb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/src/js/core/directives/ui-grid-header.js b/src/js/core/directives/ui-grid-header.js
@@ -24,19 +24,12 @@
 
             containerCtrl.header = $elm;
             containerCtrl.colContainer.header = $elm;
-
-            /**
-             * @ngdoc property
-             * @name hideHeader
-             * @propertyOf ui.grid.class:GridOptions
-             * @description Null by default. When set to true, this setting will replace the
-             * standard header template with '<div></div>', resulting in no header being shown.
-             */
 
             var headerTemplate;
-            if ($scope.grid.options.hideHeader){
+            if (!$scope.grid.options.showHeader) {
               headerTemplate = emptyTemplate;
-            } else {
+            }
+            else {
               headerTemplate = ($scope.grid.options.headerTemplate) ? $scope.grid.options.headerTemplate : defaultTemplate;            
             }
 

diff --git a/src/js/core/directives/ui-grid.js b/src/js/core/directives/ui-grid.js
@@ -217,7 +217,7 @@ angular.module('ui.grid').directive('uiGrid',
               if (grid.gridHeight < grid.options.rowHeight) {
                 // Figure out the new height
                 var contentHeight = grid.options.minRowsToShow * grid.options.rowHeight;
-                var headerHeight = grid.options.hideHeader ? 0 : grid.options.headerRowHeight;
+                var headerHeight = grid.options.showHeader ? grid.options.headerRowHeight : 0;
                 var footerHeight = grid.options.showFooter ? grid.options.footerRowHeight : 0;
                 var scrollbarHeight = grid.options.enableScrollbars ? gridUtil.getScrollbarWidth() : 0;
 

diff --git a/src/js/core/factories/GridOptions.js b/src/js/core/factories/GridOptions.js
@@ -128,17 +128,26 @@ angular.module('ui.grid')
       baseOptions.getRowIdentity = baseOptions.getRowIdentity || function getRowIdentity(row) {
         return row.$$hashKey;
       };
-
+
+      /**
+       * @ngdoc property
+       * @name showHeader
+       * @propertyOf ui.grid.class:GridOptions
+       * @description True by default. When set to false, this setting will replace the
+       * standard header template with '<div></div>', resulting in no header being shown.
+       *
+       * It will also set the `headerRowHeight` option to 0.
+       */
+      baseOptions.showHeader = typeof(baseOptions.showHeader) !== "undefined" ? baseOptions.showHeader : true;
+
       /**
        * @ngdoc property
        * @name headerRowHeight
        * @propertyOf ui.grid.class:GridOptions
        * @description The height of the header in pixels, defaults to 30
        *
        */
-      baseOptions.headerRowHeight = typeof(baseOptions.headerRowHeight) !== "undefined" ? baseOptions.headerRowHeight : 30;
-
-      if (baseOptions.hideHeader){
+      if (!baseOptions.showHeader) {
         baseOptions.headerRowHeight = 0;
       }
       else {

diff --git a/test/unit/core/factories/GridOptions.spec.js b/test/unit/core/factories/GridOptions.spec.js
@@ -23,6 +23,7 @@ describe('GridOptions factory', function () {
         rowHeight: 30,
         maxVisibleRowCount: 200,
         minRowsToShow: 10,
+        showHeader: true,
         showFooter: false,
         footerRowHeight: 30,
         columnWidth: 50,
@@ -61,6 +62,7 @@ describe('GridOptions factory', function () {
         rowHeight: 40,
         maxVisibleRowCount: 20,
         minRowsToShow: 15,
+        showHeader: true,
         showFooter: true,
         footerRowHeight: 50,
         columnWidth: 60,
@@ -96,6 +98,7 @@ describe('GridOptions factory', function () {
         rowHeight: 40,
         maxVisibleRowCount: 20,
         minRowsToShow: 15,
+        showHeader: true,
         showFooter: true,
         footerRowHeight: 50,
         columnWidth: 60,
@@ -135,6 +138,7 @@ describe('GridOptions factory', function () {
         rowHeight: 40,
         maxVisibleRowCount: 20,
         minRowsToShow: 15,
+        showHeader: false,
         showFooter: false,
         footerRowHeight: 50,
         columnWidth: 60,
@@ -146,8 +150,8 @@ describe('GridOptions factory', function () {
         excessColumns: 7,
         horizontalScrollThreshold: 3,
         scrollThrottle: 75,
-        enableSorting: false,
         enableFiltering: false,
+        enableSorting: false,
         enableColumnMenus: false,
         enableVerticalScrollbar: 0,
         enableHorizontalScrollbar: 0,
@@ -166,10 +170,11 @@ describe('GridOptions factory', function () {
         enableRowHashing: false,
         rowIdentity: testFunction,
         getRowIdentity: testFunction,
-        headerRowHeight: 40,
+        headerRowHeight: 0, // Because of showHeader: false
         rowHeight: 40,
         maxVisibleRowCount: 20,
         minRowsToShow: 15,
+        showHeader: false,
         showFooter: false,
         footerRowHeight: 50,
         columnWidth: 60,