21

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!

tebanep
  • 625
  • 1
  • 9
  • 11

5 Answers5

35

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.

mainguy
  • 8,283
  • 2
  • 31
  • 40
  • 1
    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. – mainguy Oct 15 '14 at 14:54
  • Thank you very much! It works perfectly. You really saved me from a lot of headaches :) – tebanep Oct 18 '14 at 21:41
  • @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". – SamDevx Aug 24 '15 at 01:39
  • @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: http://plnkr.co/edit/0JbjXIp8ipKV310g1k7D?p=preview – mainguy Aug 24 '15 at 07:03
  • @SamDevx: Here is the template for row coloring too: var rowtpl='
    '; And here is the plunker: http://plnkr.co/edit/e7lxlRKDt4GCj2twUguH?p=preview Thanks to Gabriel for the CSS fix!     – mainguy Aug 24 '15 at 08:30
  • @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 http://stackoverflow.com/a/32247092/2658127 .Any thoughts on that? – Rajush Nov 05 '15 at 21:07
14

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;
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Gabriel Dinant
  • 306
  • 1
  • 12
9

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.

Patrik Bego
  • 4,009
  • 1
  • 26
  • 24
3

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.

Naushad Moidin
  • 270
  • 3
  • 10
  • 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. – Rajush Nov 05 '15 at 21:00
  • @Rajush 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. – Naushad Moidin Nov 06 '15 at 09:52
  • Actually, I was able to do it using cellTemplate function or even with rowTemplate without having to do any 'gridApi.core.notifyDataChange' API call. – Rajush Nov 09 '15 at 02:06
  • Great!. It would be helpful if you could able to create a plunker and share. Thanks. – Naushad Moidin Nov 09 '15 at 08:33
  • 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. – ErikE Mar 12 '16 at 23:28
  • Awesome. Thanks for the documentation. – RedBottleSanitizer Apr 20 '21 at 17:30
1

@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

Rajush
  • 635
  • 6
  • 10