angularjs - tutorial - ui-grid columndefs
Eliminar el menú de clasificación del encabezado de la columna ui-grid (4)
Lo que quieres es:
$scope.gridOptions = {
enableColumnMenus: false
...
}
Creé ui-grid que tiene tres columnas, de forma predeterminada, el encabezado de la columna tiene un icono en forma de ''v'' (marcado en un círculo rojo en la imagen):
Aquí el código y el 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>
En la imagen de arriba de la grilla que he creado en mi proyecto.
Mi pregunta es ¿cómo puedo eliminar el signo "v" en la fila del encabezado en un círculo rojo?
Logré esto especificando enableSorting: false en la definición de columna relevante, esto es contrario a la documentación que especificó clasificable: 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
};
Puede deshabilitar la clasificación
$scope.gridOptions = {
enableSorting: false,
..
}
Si desea eliminarlo de todas las columnas, haga lo siguiente como lo sugiere Chris:
$scope.gridOptions = {
enableColumnMenus: false
...
}
Pero si desea eliminarlo de una o más pero no todas las columnas, necesita
$scope.gridOptions = {
columnDefs: [
{
enableColumnMenu: false,
...
}
Tenga en cuenta que el valor predeterminado de enableColumnMenus es verdadero.