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!

Soffit

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.

Alienable

Uhh, I have just noticed that you were asking for the whole row. Ignore my stoopid answer for now. I'll see what I can find out and will give you an update. – Alienable

Thank you very much! It works perfectly. You really saved me from a lot of headaches :) – Soffit

@mainguy, how do you check value of current cell as well as of another cell from the same row before returning 'blue' in your example above? I need to check that both "grid.getCellValue(row,col) == 1" and "sv_name" from the same row equals "test" before I return "blue". – Classicize

@SamDevx: Use: if (grid.getCellValue(row,col) == 1 && row.entity.sv_name == "Test"). With row.entitity you can access every member of the row object. Here is the plunker: plnkr.co/edit/0JbjXIp8ipKV310g1k7D?p=preview – Alienable

@SamDevx: Here is the template for row coloring too: var rowtpl='<div ng-class="{\'green\':true, \'blue\':(row.entity.count==1 && row.entity.sv_name ==\'Test\')}"><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>'; And here is the plunker: plnkr.co/edit/e7lxlRKDt4GCj2twUguH?p=preview Thanks to Gabriel for the CSS fix! – Alienable

@mainguy, but when the value you are comparing with the 'grid.getCellValue(row,col)' is only received after $http call, the color change does not happen since its ajax. I've mentioned that below as well https://mcmap.net/q/594413/-how-to-color-row-on-specific-value-in-angular-ui-grid .Any thoughts on that? – Scagliola

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

Tricot

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.

Shelburne

adding the !important did the trick for me, or else class will be not be overrided.. – Zenda

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.

Shaker

What if the value in "MY_CONSTANTS", the values that you use to compare to change the cell color, is received after an $http call? Meaning, you type some value in the field, then after edit, it fires the $http call, and then you create your "MY_CONSTANTS" with the returned data from $http, and then do the comparison of the value in the same cell with the values in "MY_CONSTANTS", and change the color based on the validation. – Scagliola

@Scagliola Upon the Edit you may need to store the row entity info in a closure. and once your $http request returns the value same closure can access your last edited row entity info. and then you may just have to publish the event to notify the changes to the framework using 'gridApi.core.notifyDataChange' API. Note: $http call should be inside the same closure where you store the entity info. – Shaker

Actually, I was able to do it using cellTemplate function or even with rowTemplate without having to do any 'gridApi.core.notifyDataChange' API call. – Scagliola

Great!. It would be helpful if you could able to create a plunker and share. Thanks. – Shaker

Modifying row or cell templates shouldn't be the first solution to a problem like this, because it can break things when you update to a later angular version. – Greaves

Awesome. Thanks for the documentation. – Pattison

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

Scagliola