Menu
here is my code:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
Q1: I want to hide the id column in ng-grid. Q2: After hiding the id column, may I get the id value when I select some row? How can modify the code?
Hear is the plunk: Plunk demo
869
You can hide columns from code by setting the visible field of each column object to true or false. You can set this initially in your data source, or change it after the grid is populated. In either case, columns that are marked as hidden will not be displayed in the grid.
Pivot Mode Off: When pivot mode is off, selecting a column toggles the visibility of the column. A selected column is visible and an unselected column is hidden. With allowDragFromColumnsToolPanel=true you can drag a column from the tool panel onto the grid it will become visible.
Show activity on this post. gridOptions = { floatingFilter: true columnDefs:[{ ... suppressMenu: true, floatingFilterComponentParams: {suppressFilterButton:true} ... }] }
You can set visible: false right in the column definition:
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: 'empno', displayName: 'empno', visible:false},
{field:'name', displayName:'name'}
]
};
You can also hide the column dynamically by adding this code after you define the grid;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.
Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.
This took some time to figure out. Hopefully, it will save others some time.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
