python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
angularjs ng-grid hide column

How to hide column in AngularJs ng grid?

Hi, I am going to share the code sample for "How to hide column in ng grid"? and after hide the column some question keep in mind as given below.

After hiding the your columns, may I get the columns value when I select some row? Answers is Yes!!

Click for live demo 

In AngularJs, we can achieve this using column property visible: false. i.e.

1
2
3
4
5
6
//We can achieve this using the property visible: false. i.e.
 columnDefs: [
        { field: 'UserId', displayName: 'UserId', visible: false },
        { field: 'Name', displayName: 'UserName' },
        { field: 'Qualification', displayName: 'Education' }]
//We can achieve this using the property visible: false. i.e.

 columnDefs: [
        { field: 'UserId', displayName: 'UserId', visible: false },
        { field: 'Name', displayName: 'UserName' },
        { field: 'Qualification', displayName: 'Education' }]
For the complete example code as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//For the complete example code as given  below.
<!DOCTYPE html>
<html ng-app="userApp">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <style>
    .gridStyle {
      height: 500px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <script>
    var app = angular.module("userApp", ['ngGrid']);
    app.controller("MyUserController", function($scope) {
      $scope.users = [{
        UserId: 01,
        Name: "Anil Singh",
        Qualification: "MCA"
      }, {
        UserId: 02,
        Name: "Sunil",
        Qualification: "M.A. PhD"
      }, {
        UserId: 03,
        Name: "Sushil",
        Qualification: "B.Tech"
      }, {
        UserId: 04,
        Name: "Dilip",
        Qualification: "MCA"
      }, {
        UserId: 05,
        Name: "Upendra",
        Qualification: "MBA"
      }, {
        UserId: 06,
        Name: "Reena",
        Qualification: "M.A(English)"
      }];
      $scope.gridOptions = {
        data: 'users',
        multiSelect: true,
        columnDefs: [{
          field: 'UserId',
          displayName: 'UserId',
          visible: false
        }, {
          field: 'Name',
          displayName: 'UserName'
        }, {
          field: 'Qualification',
          displayName: 'Education'
        }]
      };
    });
  </script>
</head>
<body ng-controller="MyUserController">
  <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
//For the complete example code as given  below.

<!DOCTYPE html>
<html ng-app="userApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJs ng-grid hide column</title>
  <style>
    .gridStyle {
      height: 500px;
    }
  </style>
  <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>
  <script>
    var app = angular.module("userApp", ['ngGrid']);

    app.controller("MyUserController", function($scope) {

      $scope.users = [{
        UserId: 01,
        Name: "Anil Singh",
        Qualification: "MCA"
      }, {
        UserId: 02,
        Name: "Sunil",
        Qualification: "M.A. PhD"
      }, {
        UserId: 03,
        Name: "Sushil",
        Qualification: "B.Tech"
      }, {
        UserId: 04,
        Name: "Dilip",
        Qualification: "MCA"
      }, {
        UserId: 05,
        Name: "Upendra",
        Qualification: "MBA"
      }, {
        UserId: 06,
        Name: "Reena",
        Qualification: "M.A(English)"
      }];


      $scope.gridOptions = {
        data: 'users',
        multiSelect: true,
        columnDefs: [{
          field: 'UserId',
          displayName: 'UserId',
          visible: false
        }, {
          field: 'Name',
          displayName: 'UserName'
        }, {
          field: 'Qualification',
          displayName: 'Education'
        }]
      };
    });
  </script>
</head>

<body ng-controller="MyUserController">
  <div class="gridStyle" ng-grid="gridOptions"></div>
</body>

</html>
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions