angularjs - UI Grid RowTemplate color based on cell value

Question

I am using below rowTemplate. I want to apply the css class "ui-grid-invalid-upload-row" when the Valid ==true. Somehow, it is not working.

<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-invalid-upload-row\': col.colDef["Value"]==true }" ui-grid-cell></div>

Answer 1

Use row.entity.yourfieldname if you want color row

Like ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"

A working plunker is here

---

If you only want to apply class to Cell use cellClass instead

  $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';
        }
      }
    ]
  };

A working pluncker is here

Let me know if it helps you.

Answer 2

I changed col.colDef["Value"]==true to col.colDef[\'Value\']. The double quotes prematurely terminates the ng-class statement

<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-invalid-upload-row\': col.colDef[\'Value\'] }" ui-grid-cell></div>

EDIT Since you wanted to change the color based on cell value, I think you should modify cellTemplate instead.

Answer 3

I get the above working, I used below to change color based on row.entity.[FieldName]. Posting here hoping someone would get help from it,

function rowTemplate() {
        return $timeout(function () {
            return '<div ng-class="{ \'ui-grid-invalid-upload-row\': grid.appScope.rowFormatter( row ) }">' +
                        ' <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>';
        });
    }

$scope.rowFormatter = function (row) {
    return row.entity.Value === 'true';
};