18

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

7 Answers 7

26

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'}
    ]
};
3
  • How can i hide column from column chooser also. If i set 'visible:false' column will hide from grid not from column chooser, is there any way to achieve it
    – Pradeep
    Jan 20, 2017 at 10:20
  • @Pradeep You have to modify the code for the ng-grid-menu template or inject your own custom template at run-time. There you have control over which columns are displayed in the menu. Jan 23, 2017 at 18:11
  • Alternatively, you can add and remove columns from the columns collection instead of using the visible setting. Jan 23, 2017 at 18:14
22

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.

1
  • 1
    To make this work with ui-grid v3.2.9 - 2016-09-21, I had to make the following call after changing the column visibility properties: this.gridApi.grid.refresh();
    – CAK2
    Dec 15, 2016 at 15:00
18

Just add below lines to configuration and it will work

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]
3
  • Hi Ajay. If we want to show two columns under one displayName how can we do? I want to show FirstName+LastName in one column called Name. I have tried columnDefs: [ { field: 'FirstName'+'LastName', displayName: 'Name' }, ]. But not working. Please help Sep 4, 2013 at 11:38
  • Hi @Ajay. if we se multiSelect: false so that the user can only click on one row, How to get the selected row? is there any property like selectedRow or selectedItem instead of selectedItems?? because if we use selectedItems for multiSelect:false, our selected row will be added in $scope.mySelections array and if we want to access that item we have to write $scope.mySelections[0].name.. How to solve it ? Sep 5, 2013 at 6:26
  • What about if you don't know the visible column definitions but you do know which columns you will be hiding, how its done in this case??
    – Cesar Vega
    Feb 19, 2016 at 20:15
8

To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.

columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]

If you want to check it in complete example you need to write the code like as shown below

<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.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>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
           { field: 'userid', visible: false, displayName: 'UserId' },
           { field: 'username', displayName: 'UserName' },
           { field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
3
  • 2
    looks like this is correct answer. the question was to hide the column.
    – Shamseer
    Sep 6, 2015 at 19:46
  • How can i hide column from column chooser also.
    – Pradeep
    Jan 20, 2017 at 10:19
  • the width of the column chooser panel is changed using the columnChooser. Try like, <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{ dataSource: books, columns: [ 'author', 'title', 'year', 'genre', 'format', { dataField: 'price', visible: false }, { dataField: 'length', visible: false } ], paging: { pageSize: 7 }, columnChooser: { enabled: true, width: 400 } }"></div>
    – Anil Singh
    Jan 23, 2017 at 10:55
3

We can use the following code after define the grid

 if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
     $scope.ConfigItemGrid.columnDefs[4].visible = false;
 else
     $scope.ConfigItemGrid.columnDefs[4].visible = true;
0
3

Use "hide: true" attribute as below in Angular 2, working fine for me:

columnDefs = [
    { headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
    { headerName: "Model", field: "model", filter: 'text'},
    {
        headerName: "Price",
        field: "price",
        filter: 'number',
        cellClass: 'rightJustify',
        cellRenderer: function (params: any) {
            return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
        }
    }
];
1
  • hide makes no difference for me. visible:false does. headerName is also ignored, displayName works. angular v 1.5.3 here. Apr 11, 2016 at 9:22
0

I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.