Remove sorting menu from ui-grid column header

Asked 19/9, 2015 at 17:29 Answered 20/4, 2016 at 12:10

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?

Gwenora answered 19/9, 2015 at 17:29 Comment(0)

What you want is:

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

Electrophone answered 20/9, 2015 at 10:33 Comment(2)

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! – Deltadeltaic 1/2, 2016 at 5:19

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. – Halfslip 6/4, 2016 at 15:0

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.

Cattycornered answered 8/1, 2016 at 9:3 Comment(0)

You can disable sorting

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

Schnapps answered 19/9, 2015 at 17:55 Comment(3)

any idea how do I remove a 'v' sign in header row? – Gwenora 19/9, 2015 at 18:21

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 – Ibidem 22/9, 2015 at 12:58

For some reason this worked for me, but not enableColumnMenu like in the more popular Answers. – Wier 10/5, 2017 at 17:47

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
};

Gayden answered 20/4, 2016 at 12:10 Comment(0)

Recommended topics

Hot tags