How to color row on specific value in angular-ui-grid?

I’m trying to color a row depending on it’s value in the new angular-ui-grid 3.0 rc12 but I haven’t been able to. The following code used to work in the previous version (ngGrid):

$scope.gridOptions =
    data: 'data.sites'
    tabIndex: -1
    enableSorting: true
    noTabInterference: true
    enableColumnResizing: true
    enableCellSelection: true
    columnDefs: [
      {field: 'sv_name', displayName: 'Nombre'}
      {field: 'sv_code', displayName: 'Placa'}
      {field: 'count', displayName: 'Cuenta'}
    rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
                         ng-repeat="col in colContainer.renderedColumns track by"

and the corresponding css:

  • angular ui-grid grouping header
  • How can I remove some columns in pdf export in angular js ui Grid
  • How to properly delete selected items ui.grid Angular JS
  • Selected Items are not getting reset after refreshing Angular UI Grid
  • Angular-UI grid : adding custom field in columnDefs and access it from header template
  • How to use refresh method in ui-grid?
  • .grid {
      width: 100%;
      height: 250px;
    .green {
      background-color: #2dff07;
      color: #006400;
    .blue {
      background-color: #1fe0f0;
      color: #153ff0;

    The problem here is that the expression:

    row.getProperty('count') === 1

    Doesn’t work anymore as it did in ngGrid. Any guesses of how to achive the same in angular-ui-grid (

    Thanks a lot!

  • How to Get Filtered data from paged ui-grid
  • $scope.uiGrid is undefined
  • AngularJS - ui-grid - Column Moving - get new order of columns
  • how to show data from json to ui-grid in angular ui-grid
  • AngularJS ui.grid exporter fail to load
  • ui grid performance issue with celltemplates
  • 5 Solutions collect form web for “How to color row on specific value in angular-ui-grid?”

    The new ui-grid has a special property for the cellClass:

      $scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { field: 'sv_name', displayName: 'Nombre'},
          {field: 'sv_code', displayName: 'Placa'},
          { field: 'count', displayName: 'Cuenta',
            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
              if (grid.getCellValue(row,col) == 1) {
                return 'blue';
              return 'green';

    Look at his Plunker

    Note that I made the color for class green in red because it’s better to see and to stir maximal confusion:-)


    Here is the solution for row coloring.

    Write your rowTemplate like this:

      var rowtpl='<div ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

    Here is the forked Plunker

    Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)

    Sorry for the initial misread of your question. I leave the cellClass part in this answer in case anyone may need it.

    Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)

    Based on the previous answer, if you want to override the background-color at a row level you can use this:

    .ui-grid-row .ui-grid-cell {
       background-color: inherit !important;

    You can simply just use specific css class

    .invalidated {
    background-color: #f2dede !important;

    and add ng-class on row template div with ‘invalidated’ field or call a function (example is in plnkr):

    <div ng-class="{invalidated: row.entity.invalidated}"

    Here is the plunkr

    Hope that helps.

    Please try this
    see the code here

    I have covered many scenario based cell colors like.

    1. Negative values cell will show in RED
    2. Dirty cells will be YELLOW.
    3. Editable cells will be WHITE
    4. NonEditable cells will be GREY
    5. Total value cells will be DARKGREYED

    Give it a try. May be you can grab some knowledge/idea from there.

    @Naushad KM and if anybody have to do real time cell validation after a $http call.

    This is what it’s doing:

    1. Input a value in editable row.
    2. On focus loose (blur), makes an $http call.
    3. Validates the input value with returned data.
    4. Valid value will be GREEN, invalid will be RED.

    Example: Plunker