How to hide column in ng grid

A

7

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

Advisee answered 6/6, 2013 at 5:9 Comment(0)

P

18

Just add below lines to configuration and it will work

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]

Parlor answered 6/6, 2013 at 5:25 Comment(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 – Distemper 4/9, 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 ? – Distemper 5/9, 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?? – Davie 19/2, 2016 at 20:15

M

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

Microhenry answered 8/7, 2014 at 22:25 Comment(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 – Eyewitness 20/1, 2017 at 10:20

@Eyewitness 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. – Microhenry 23/1, 2017 at 18:11

Alternatively, you can add and remove columns from the columns collection instead of using the visible setting. – Microhenry 23/1, 2017 at 18:14

J

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.

Jeraldinejeralee answered 1/4, 2014 at 12:18 Comment(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(); – Outlaw 15/12, 2016 at 15:0

P

18

Just add below lines to configuration and it will work

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]

Parlor answered 6/6, 2013 at 5:25 Comment(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 – Distemper 4/9, 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 ? – Distemper 5/9, 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?? – Davie 19/2, 2016 at 20:15

A

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>

Appassionato answered 25/2, 2015 at 5:41 Comment(3)

looks like this is correct answer. the question was to hide the column. – Campbellbannerman 6/9, 2015 at 19:46

How can i hide column from column chooser also. – Eyewitness 20/1, 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> – Appassionato 23/1, 2017 at 10:55

P

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;

Pinebrook answered 11/12, 2014 at 7:39 Comment(0)

R

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

Ragland answered 27/1, 2016 at 20:13 Comment(1)

hide makes no difference for me. visible:false does. headerName is also ignored, displayName works. angular v 1.5.3 here. – Drucill 11/4, 2016 at 9:22

A

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.

Atypical answered 9/4, 2015 at 13:43 Comment(0)

Recommended topics

Hot tags