The ability to remove the 'Hide Column' option in the column menu

[wattsbn]

As the title suggests, I would like the ability to remove the 'Hide Column' option from the column drop down menu. I really want to turn it off for all my columns, but I would imagine being able to turn it off per column would be more flexible for other people. The docs provide an example of how to add more options to the menu, but not a way to remove the built-in ones. Since there doesn't seem to be a built-in way to add the columns back, I don't really want to give the users a way to remove them. I would also like the ability to remove the 'Remove Sort' menu item. One of my grids only has one sortable column and it doesn't really make sense to be able to remove the sort direction in that case.

I think the best solution would be to allow us to override the built-in menu items in the column menu both globally and for individual columns. This would let us remove menu items that we don't want (like 'Hide Item'), provide icons that match our applications theme, or allow for us to use different localization implementations. However, this is also probably the most work, and I really only need the ability to remove specific menu items for now.

[PaulL1]

I also would like to turn the menu off, so I'll work on this in the next few weeks.

There are three ways to get columns back:

1. Refresh the page
2. Build a custom column add backer
3. Wait for the grid menu (which is coming) and which will have the ability to add columns back.

[wattsbn]

To clarify, this issue is not about turning off the column menu, but the ability to remove one or more of the built-in menu items inside the column menu. I still want to use the column menus, but I don't want to give the user the ability to remove a column or remove the sort on a column.

[PaulL1]

I'll look at this together with #1614 and #1603

[PaulL1]

Just a question @wattsbn : removing the sort on a column means clearing the sort. So you'd like someone to be able to sort ASC or sort DESC, but not to sort NONE?

[PaulL1]

I've provided the ability to hide the column menu entirely, and to remove the hide column option. I haven't removed the sort NONE option as that doesn't make sense to me yet.

[PaulL1]

I've provided the ability to hide the column menu entirely, and to remove the hide column option. I haven't removed the sort NONE option as that doesn't make sense to me yet.

[wattsbn]

@PaulL1 Thanks for the quick turnaround on the fixes and enhancements.

I would still like the ability to to force a column to always have a sort. In one of my grids there is only one sortable column and if it is unsorted, then the data is displayed in a seemingly random way. I don't see how it is useful to the user in that case.

After using your changes that you recently merged in. There are still two bugs involving the column menu that have not yet been resolved. I have replied on #1603 describing them.

[PaulL1]

Ah, OK, understand where you're going with that. Probably be Tuesday before I get to that now.

[Jangular]

I'm just learning Angular & UI grid, a follow-up question, can the angle-down icon be completely disabled or hidden so users can't do any sorting, etc. Thanks.

[PaulL1]

If you disable sorting on the grid - refer the gridOptions in the api documentation: http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions

[j2L4e]

As it took me some time to figure it out and most of my google searches turned up this page:

The column hiding can be disabled by setting

enableHiding = false on the column's colDef.

[cortezcristian]

thanks @j2L4e

[Hasnaa-Ibraheem]

Would you please add this option: "enableHiding = false" on grid level, not only columnDef level?
Also I'd appreciate that you remove the reserved empty space for "Hide Column" option if the option is disabled.
Thanks in advance.

[mmilito]

Hi, just checking also on the ability to re-add a hidden column without refreshing the page?

[Hasnaa-Ibraheem]

Hi mmilito
You can add a column without refreshing the page by adding this line to your script:
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
I tried it and it works fine with me, check the tutorial website: http://ui-grid.info/docs/#/tutorial/113_adding_and_removing_columns

[kr99]

A grid-level option for this would make a lot of sense.

[HaakonH]

This would be great to have, so reposting as I need as well:
👍 I'm just learning Angular & UI grid, a follow-up question, can the angle-down icon be completely disabled or hidden so users can't do any sorting, etc. Thanks.

[mariohmol]

enableHiding = false is not working for me.. tested in column and grid level..

  $scope.gridOptions = {
          appScopeProvider: this,
          enableHiding: false,
          data: []
      };


$scope.gridOptions.columnDefs = [{
          name: 'topic',enableHiding: false,

I had to fix this manually:

.ui-grid-column-menu-button{
  display: none;
}

[mariohmol]

Tested using gridMenuShowHideColumns as http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions .. do not work as well

[Olegarius]

Hi guys.
Can I propose again my working solution for this case?
First, we must override some method from ui-grid.

(function () {
    'use strict';

    angular
        .module('ui.grid')
        .service('UIGridOverrideService', ['uiGridColumnMenuService',
          function (uiGridColumnMenuService) {
              //overriding ui-grid service methodfor column menu customization
                uiGridColumnMenuService.setColMenuItemWatch = function ($scope) {
                    var deregFunction = $scope.$watch('col.menuItems', function (n) {
                        if (typeof (n) !== 'undefined' && n && angular.isArray(n)) {
                            n.forEach(function (item) {
                                if (typeof (item.context) === 'undefined' || !item.context) {
                                    item.context = {};
                                }
                                item.context.col = $scope.col;
                            });

                            $scope.menuItems = n;
                        }
                        else {
                            $scope.menuItems = $scope.defaultMenuItems;
                        }
                    });

                    $scope.$on('$destroy', deregFunction);
                }
          }]);
})();

Next, include UIGridOverrideService to your controller. And use it in the grid. For example:

    angular
      .module('app')
      .controller('BetsController', ['$rootScope', '$scope', 'UIGridOverrideService',
          function ($rootScope, $scope, UIGridOverrideService) {

//generate column menu
               function getColumnMenuItems() {
                  var columnMenuItems = [{
                      title: 'Hide Column',
                      icon: 'ui-grid-icon-cancel',
                      action: function () {
                          var columns = $scope.gridOptions.columnDefs;
                          columns.forEach(function (item) {
                              if (item.name == this.context.col.name) {
                                  item.visible = false;
                              }
                          });

                          $scope.gridApi.grid.refresh();
                          if ($scope.subGridApi) {
                              $scope.subGridApi.grid.refresh();
                          }

                      }
                  },
                  {
                      title: 'Show All Columns',
                      icon: 'ui-grid-icon-menu',
                      action: showColumns
                  }];
                  return columnMenuItems;
              }
             //..... grid initialization

              $scope.gridOptions = {
                  enableColumnMenus: true,
                  columnDefs: [
                    {
                        name: 'Date',
                        displayName: 'Bet Date',
                        width: 180,
                        menuItems: getColumnMenuItems()
                    },
                    {
                        name: 'Id',
                        displayName: 'Bet ID',
                        width: 100,
                        menuItems: getColumnMenuItems()
                    },
                    //.....
             }
            //...... set grid data and other your code
           function showColumns(){
                //your code for showing all grid columns
           }
}

You can also use the same way to add custom sorting or something else.
Hope, somebody it helps.

[adamjaffeback]

I'm still seeing this as an issue with 4.4.9. I've tried the following grid-level (GridOptions) solutions, per documentation, to hide the "X Hide Column" dropdown on a column:

• gridMenuShowHideColumns = false, credit The ability to remove the 'Hide Column' option in the column menu #1604 (comment). Plunkr
• enableGridMenu = false.

The following solutions work as column-level (GridOptions.columnDef) options:

• enableHiding = false Plunkr
• enableColumnMenu = false