feat: 🎸 the ability to disable hide columns on a grid level

Setting enableHiding to false in gridOptions will remove the ability to
hide columns by default on all columns, unless explicitly enabled in the
column definition.

Closes: #1604

misc/tutorial/121_grid_menu.ngdoc

@@ -30,8 +30,9 @@ want them also internationalized in the grid menu.  The translate needs to retur
 or a promise that will resolve to a string.  In the example below we create a fake
 internationalization function that waits 1 second then prefixes each column with "col: ".
 
-You can suppress the ability to show and hide columns by setting the gridOption `gridMenuShowHideColumns: false`,
+You can suppress the ability to show and hide columns on the grid menu button by setting the gridOption `gridMenuShowHideColumns: false`,
 you can suppress the ability to hide individual columns by setting `enableHiding` on that columnDef to false.
+you can suppress the ability to hide all columns by setting `enableHiding` on that gridOptions to false.
 
 The gridMenu button is still a bit ugly.  If you have the skills to do so we'd welcome a PR that makes it pretty.
 In the meantime, you can override the height to fit with your application in your css:

packages/core/src/js/directives/ui-grid-column-menu.js

@@ -64,6 +64,9 @@ function ( i18nService, uiGridConstants, gridUtil ) {
       $scope.$on( '$destroy', deregFunction );
     },
 
+    getGridOption: function( $scope, option ) {
+      return typeof($scope.grid) !== 'undefined' && $scope.grid && $scope.grid.options && $scope.grid.options[option];
+    },
 
     /**
      * @ngdoc boolean
@@ -81,7 +84,7 @@ function ( i18nService, uiGridConstants, gridUtil ) {
      *
      */
     sortable: function( $scope ) {
-      return Boolean( $scope.grid.options.enableSorting && typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.enableSorting);
+      return Boolean( this.getGridOption($scope, 'enableSorting') && typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.enableSorting);
     },
 
     /**
@@ -128,7 +131,12 @@ function ( i18nService, uiGridConstants, gridUtil ) {
      *
      */
     hideable: function( $scope ) {
-      return !(typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.colDef && $scope.col.colDef.enableHiding === false );
+      return Boolean(
+        (this.getGridOption($scope, 'enableHiding') &&
+        typeof($scope.col) !== 'undefined' && $scope.col &&
+        ($scope.col.colDef && $scope.col.colDef.enableHiding !== false || !$scope.col.colDef)) ||
+        (!this.getGridOption($scope, 'enableHiding') && $scope.col && $scope.col.colDef && $scope.col.colDef.enableHiding)
+      );
     },
 
 

packages/core/src/js/directives/ui-grid-menu-button.js

@@ -258,17 +258,10 @@ angular.module('ui.grid')
         return isColumnVisible(colDef) ? 'ui-grid-icon-ok' : 'ui-grid-icon-cancel';
       }
 
-      // add header for columns
-      showHideColumns.push({
-        title: i18nService.getSafeText('gridMenu.columns'),
-        order: 300,
-        templateUrl: 'ui-grid/ui-grid-menu-header-item'
-      });
-
       $scope.grid.options.gridMenuTitleFilter = $scope.grid.options.gridMenuTitleFilter ? $scope.grid.options.gridMenuTitleFilter : function( title ) { return title; };
 
       $scope.grid.options.columnDefs.forEach( function( colDef, index ) {
-        if ( colDef.enableHiding !== false ) {
+        if ( $scope.grid.options.enableHiding !== false && colDef.enableHiding !== false || colDef.enableHiding ) {
           // add hide menu item - shows an OK icon as we only show when column is already visible
           var menuItem = {
             icon: getColumnIcon(colDef),
@@ -297,6 +290,16 @@ angular.module('ui.grid')
           showHideColumns.push( menuItem );
         }
       });
+
+      // add header for columns
+      if ( showHideColumns.length ) {
+        showHideColumns.unshift({
+          title: i18nService.getSafeText('gridMenu.columns'),
+          order: 300,
+          templateUrl: 'ui-grid/ui-grid-menu-header-item'
+        });
+      }
+
       return showHideColumns;
     },
 

packages/core/src/js/factories/GridOptions.js

@@ -366,6 +366,17 @@ angular.module('ui.grid')
        */
       baseOptions.scrollDebounce = typeof(baseOptions.scrollDebounce) !== "undefined" ? baseOptions.scrollDebounce : 300;
 
+      /**
+       * @ngdoc boolean
+       * @name enableHiding
+       * @propertyOf ui.grid.class:GridOptions
+       * @description True by default. When enabled, this setting adds ability to hide
+       * the column headers, allowing hiding of the column from the grid.
+       * Column hiding can then be disabled / enabled on individual columns using the columnDefs,
+       * if it set, it will override GridOptions enableHiding setting.
+       */
+      baseOptions.enableHiding = baseOptions.enableHiding !== false;
+
       /**
        * @ngdoc boolean
        * @name enableSorting

packages/core/test/core/directives/ui-grid-column-menu.spec.js

@@ -196,14 +196,30 @@ describe('ui-grid-column-menu uiGridColumnMenuService', function() {
 		});
 
 		describe('hideable: ', function() {
+			it('grid.options missing', function() {
+				$scope.col = {uid: 'ui-grid-01x', enableHiding: true};
+				$scope.grid = {options: {}};
+
+				expect(uiGridColumnMenuService.hideable($scope)).toEqual(false);
+			});
+
 			it('everything present: is not hideable', function() {
 				$scope.col = {uid: 'ui-grid-01x', colDef: {enableHiding: false}};
+				$scope.grid = {options: {enableHiding: true}};
 
 				expect(uiGridColumnMenuService.hideable($scope)).toEqual(false);
 			});
 
+			it('everything present: is hideable', function() {
+				$scope.col = {uid: 'ui-grid-01x', colDef: {enableHiding: true}};
+				$scope.grid = {options: {enableHiding: false}};
+
+				expect(uiGridColumnMenuService.hideable($scope)).toEqual(true);
+			});
+
 			it('colDef missing: is  hideable', function() {
 				$scope.col = {uid: 'ui-grid-01x'};
+				$scope.grid = {options: {enableHiding: true}};
 
 				expect(uiGridColumnMenuService.hideable($scope)).toEqual(true);
 			});

packages/core/test/core/directives/ui-grid-menu-button.spec.js

@@ -255,7 +255,7 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
 				});
 				$scope.$digest();
 
-				expect(menuItems.length).toEqual(6, 'Should be 10 items, 1 columns header, 4 columns that allow hiding and Clean all filters');
+				expect(menuItems.length).toEqual(6, 'Should be 6 items, 1 columns header, 4 columns that allow hiding and Clean all filters');
 				expect(menuItems[0].title).toEqual('Clear all filters', 'Menu item 0 should be Clear all filters');
 				expect(menuItems[1].title).toEqual('Columns:', 'Menu item 0 should be header');
 				expect(menuItems[1].templateUrl).toEqual('ui-grid/ui-grid-menu-header-item');
@@ -264,6 +264,23 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
 				expect(menuItems[4].title).toEqual('resolve_2', 'Promise now resolved');
 				expect(menuItems[5].title).toEqual('resolve_3', 'Promise now resolved');
 			});
+			it('should not add any columns if enableHiding if false and not enable on any columns', function() {
+				grid.options.enableHiding = false;
+				menuItems = uiGridGridMenuService.getMenuItems($scope);
+
+				expect(menuItems.length).toEqual(1, 'Should be 1 items, the clear all filters button');
+				expect(menuItems[0].title).toEqual('Clear all filters', 'Menu item 0 should be Clear all filters');
+			});
+			it('should add any columns if enableHiding if false, but enabled on one columns', function() {
+				grid.options.enableHiding = false;
+				grid.options.columnDefs[1].enableHiding = true;
+				menuItems = uiGridGridMenuService.getMenuItems($scope);
+
+				expect(menuItems.length).toEqual(3, 'Should be 3 items, 1 columns header, 1 columns that allow hiding and Clean all filters');
+				expect(menuItems[1].title).toEqual('Columns:', 'Menu item 0 should be header');
+				expect(menuItems[1].templateUrl).toEqual('ui-grid/ui-grid-menu-header-item');
+				expect(menuItems[2].title).toEqual('Col2', 'Column heading');
+			});
 		});
 
 		describe('showHideColumns: ', function() {

packages/core/test/core/factories/GridOptions.spec.js

@@ -38,6 +38,7 @@ describe('GridOptions factory', function () {
         aggregationCalcThrottle: 500,
         wheelScrollThrottle: 70,
         scrollDebounce: 300,
+        enableHiding: true,
         enableSorting: true,
         enableFiltering: false,
         filterContainer: 'headerCell',
@@ -86,6 +87,7 @@ describe('GridOptions factory', function () {
         excessColumns: 7,
         aggregationCalcThrottle: 1000,
         wheelScrollThrottle: 75,
+        enableHiding: true,
         enableSorting: true,
         enableFiltering: true,
         filterContainer: 'columnMenu',
@@ -132,6 +134,7 @@ describe('GridOptions factory', function () {
         aggregationCalcThrottle: 1000,
         wheelScrollThrottle: 75,
         scrollDebounce: 300,
+        enableHiding: true,
         enableSorting: true,
         enableFiltering: true,
         filterContainer: 'columnMenu',
@@ -183,6 +186,7 @@ describe('GridOptions factory', function () {
         wheelScrollThrottle: 75,
         enableFiltering: false,
         filterContainer: 'columnMenu',
+        enableHiding: false,
         enableSorting: false,
         enableColumnMenus: false,
         enableVerticalScrollbar: 0,
@@ -226,6 +230,7 @@ describe('GridOptions factory', function () {
         aggregationCalcThrottle: 1000,
         wheelScrollThrottle: 75,
         scrollDebounce: 300,
+        enableHiding: false,
         enableSorting: false,
         enableFiltering: false,
         filterContainer: 'columnMenu',