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

Question

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 col.colDef.name"
                         class="ui-grid-cell"
                         ui-grid-cell></div>"""

and the corresponding css:

.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 (ui-grid.info)

Thanks a lot!

Answer 1

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

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    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:-)

Update:

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 col.colDef.name" 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.

Answer 2

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;
}

Answer 3

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 http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

Hope that helps.

Answer 4

Please try this
see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info.
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.

Answer 5

@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