CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-ui-grid
tebanep
tebanep

Reputation: 645

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 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!

Upvotes: 21

Views: 56490

Answers (5)

Gabriel Dinant
Gabriel Dinant

Reputation: 363

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

Upvotes: 14

Patrik Bego
Patrik Bego

Reputation: 4115

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.

Upvotes: 9

Rajush
Rajush

Reputation: 665

@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

Upvotes: 1

Naushad Moidin
Naushad Moidin

Reputation: 280

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.

Upvotes: 3

mainguy
mainguy

Reputation: 8331

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.

Upvotes: 35

Related Questions