Angular js Grid Validation

Question

I want to add validation, such that those cells of my grid, which have age more than 40, will show in red color?

     <html ng-app="myApp">  
     <head lang="en">
     <meta charset="utf-8">
     <title>Getting Started With ngGrid Example</title>  
     <link rel="stylesheet" type="text/css" href="ng-grid.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript" src="angular.js"></script>
     <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
     <script type="text/javascript">
     var app = angular.module('myApp', ['ngGrid']);
         app.controller('MyCtrl', function($scope) {
                 $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
        $scope.gridOptions = { 
           data: 'myData',
       enableCellSelection: true
                         };
            });
          </script>
             </head>
    <body ng-controller="MyCtrl">
       <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
    </html>

How Can I do that? Please help me?

Hi **ng-grid is being rewritten as UI Grid, it's in beta! ** — vamsikrishnamannem
– vamsikrishnamannem, Commented Apr 25, 2015 at 5:35

sfletche · Accepted Answer · 2015-04-25 05:28:31Z

2

You can add a cell template to your grid

 $scope.gridOptions = { 
     data: 'myData',
     enableCellSelection: true
     columnDefs: [{cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};

See the Template Examples section of the docs for more.

answered Apr 25, 2015 at 5:28

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chetan Sanghani · Accepted Answer · 2015-04-25 05:33:12Z

1

you can use this.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34}];
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
        };
});

answered Apr 25, 2015 at 5:33

Chetan Sanghani

2,1313 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular js Grid Validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related