angular UI-Grid - How to change the color of the Cell based on the value

Question

I am new to Angular and UI Grid I am trying to color the cell of the UI Grid when a particular value is been displayed for that purpose I am using the cellcalss property in columndef of GridOptions

 $scope.gridOptions = {
            enablePaginationControls: false,
            paginationCurrentPage:1,
            data:scdet.data,
            columnDefs: [
              {name: 'Route Number', field: 'RouteNumber' },
              {
                  name: 'Load Ready', field: 'LoadReady', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col).toLowerCase() === 'No') {
                          return 'semi-red';
                      }
                  }
              },
              {
                  name: 'Start of Day', field: 'SOD', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col).toLowerCase() === 'No') {
                          return 'semi-red';
                      }
                  }
              },
              {name: 'End of Day', field: 'EOD'},
              {name: 'Cut off', field: 'Cutoff'},
              {name: 'Settlement', field: 'Settlement'},
              {name: 'Closed', field: 'Closed'}
            ]


        };

CSS for this

.semi-red
{
  background-color:#DC143C;
}

but the red color is not displaying, anyone please pointout to me what I am doing wrong in this code

PSK · Accepted Answer · 2018-02-12T08:04:32.210

Default cell class is overriding your style. Try changing your class as following.

  .semi-red
  {
    background-color:#DC143C !important;
  }

Following is the complete sample for your scenario.

angular.module('app', ['ui.grid'])

.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { name: 'name' },
      { name: 'age' },
      {
        name: 'gender',
        cellClass: function (grid, row, col, rowIndex, colIndex) {
          var val = grid.getCellValue(row, col);
          if (val === 'male') {
            return 'semi-red';
          }
        
        }
      }
    ]
  };
  
 
  $scope.gridOptions.data = [
  {
    "name": "PK",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Meredith",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Miriam",
    "age": 27,
    "gender": "female"
  }
];

}]);

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

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.css" />
  
  <style>
    .semi-red
  {
    background-color:#DC143C !important;
  }
  </style>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

angular UI-Grid - How to change the color of the Cell based on the value

1 Answers1