Remove sorting menu from ui-grid column header

Question

I created ui-grid that has three columns, by default, the column header have a 'v' shaped icon (marked in red circle in the image) :

Here the code and the plunker:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);


app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
      $scope.gridOptions = {
        expandableRowTemplate: 'expandableRowTemplate.html',
        expandableRowHeight: 150,
        onRegisterApi: function (gridApi) {
            gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
                if (row.isExpanded) {
                  row.entity.subGridOptions = {
                    columnDefs: [
                    { name: 'name'},
                    { name: 'gender'},
                    { name: 'company'}
                  ]};

                  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                    .success(function(data) {
                      row.entity.subGridOptions.data = data;
                    });
                }
            });
        }
      }

      $scope.gridOptions.columnDefs = [
        { name: 'id', pinnedLeft:true },
        { name: 'name'},
        { name: 'age'},
        { name: 'address.city'}
      ];

      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          $scope.gridOptions.data = data;
        });
    }]);

.grid {
  width: 100%;
  height: 400px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>


<div ng-controller="ThirdCtrl">
   <div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

In the image above the grid I have created in my project.

My question is how can I remove the "v" sign in header row in red circle?

score 58 · Accepted Answer · answered Sep 20 '15 at 10:33

58

What you want is:

$scope.gridOptions = {
    enableColumnMenus: false
    ...
}

answered Sep 20 '15 at 10:33

Chris

696
6
7

1

This is not the correct answer. Normaly you have your columDefs defined. Then you have to move the enableColumsMenus inside every columDef. So the answer below is correct! – jet miller Feb 01 '16 at 05:19
8

I dont know that I would say 'This is not the correct answer'. The OP asked how to remove the menu drop downs from all the headers, and this answer is correct for that question. The other answer provides additional information on granularity, but that doesnt make this answer wrong. – bradimus Apr 06 '16 at 15:00

score 31 · Answer 2 · edited Jan 29 '16 at 05:14

If you want to remove it from all column do the following as suggested by Chris:

    $scope.gridOptions = {
        enableColumnMenus: false
        ...
    }

But if you want to remove it from one or more but not all columns you need

 $scope.gridOptions = {
    columnDefs: [
        {                    
            enableColumnMenu: false,
    ...
}

Note that the default value of enableColumnMenus is true.

score 9 · Answer 3 · answered Sep 19 '15 at 17:55

9

You can disable sorting

    $scope.gridOptions = {
           enableSorting: false,
           .. 
    }

answered Sep 19 '15 at 17:55

eran otzap

12,293
20
84
139

any idea how do I remove a 'v' sign in header row? – Michael Sep 19 '15 at 18:21
1

Is there any way I can remove a particular entry in the column menu? Lets say is column pinning is enable I will have pin left or right in the menu. But I want to hide is for some specific column. Is there any configuration for this – BiJ Sep 22 '15 at 12:58
For some reason this worked for me, but not enableColumnMenu like in the more popular Answers. – cellepo May 10 '17 at 17:47

score 4 · Answer 4 · answered Apr 20 '16 at 12:10

I managed this by specifying enableSorting: false on the relevant column definition, this is contrary to the documentation which specified sortable: false.

var uiGrid = [];
var columnsUiGrid = [
    { displayName: 'Column A', field: 'model.ColumnA' },
    { displayName: 'Column B', field: 'model.ColumnB', enableSorting: false }
];

$scope.uiGridOptions = {
    enableSorting: true,
    columnDefs: columnsUiGrid,
    data: uiGrid
};

Remove sorting menu from ui-grid column header

4 Answers4

Linked