CODEWITHSUNDEEP
angularjsng-grid
user2724215
user2724215

Reputation: 155

ng grid cell template not updating the changed values

I am trying to refresh the ng grid data on button click which is out side the ng grid, the normal cell values are refreshing (the modified values are updated) but the cell templates are not refreshing based on the value changes.

Thanks in advance

Upvotes: 2

Views: 2892

Answers (1)

Raju Mandapati
Raju Mandapati

Reputation: 691

As there is no example associated with the question, I will go ahead and create my own solution to update the cell template (apply a CSS class) automatically if the dataSource changes for the ng-grid.

Here is the working plunk. http://run.plnkr.co/plunks/QpDBeHkFAwOtuexVuO5T/

I have moved the logic for applying the cell template from ng-grid to the controller as a function that returns a string which is a CSS class name.

This solution will work for any changes to ng-grid's data source as every single time a change happens to the data source, the corresponding angular code will be executed which in turn calls a function inside controller that gets the style data.

Answer to your question: It all depends on the way we design our cell templates.

Let me know if this doesn't solve your problem.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    
    $scope.addBigPerson = function(){
      $scope.myData.push({name:'abc', age: 75});
    }
    
    $scope.addSmallPerson = function(){
      $scope.myData.push({name:'abc', age: 34});
    }
  
    $scope.getClassForPerson = function(age){
      if(age > 40)return 'green';
      return 'red';
    }
  
    $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="getClassForPerson(row.getProperty(col.field))"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
        };
});
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

.green {
  background-color: green;
	color: white;
}

.red {
  background-color: red;
	color: white;
}
<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom 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 type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <button ng-click="addBigPerson()">add big</button>
        <button ng-click="addSmallPerson()">add small</button>
    </body>
</html>

Upvotes: 2

Related Questions