Remove sorting menu from ui-grid column header
25,916
Solution 1
What you want is:
$scope.gridOptions = {
enableColumnMenus: false
...
}
Solution 2
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.
Solution 3
You can disable sorting
$scope.gridOptions = {
enableSorting: false,
..
}
Solution 4
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
};
Author by
Michael
Updated on May 11, 2020Comments
-
Michael about 4 years
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?