Row Color based on data property in Angular UI-Grid

Question

I am working on Angular UI- Grid. I have a scenario in which i need to change the color of the cell of grid using a data value.

In the above grid the rows that are colored are done based on a data column. I get a column in my grid as BG_COLOR i need to change the color of the row based on it.

Answer 1

I think that the field you want is cellClass. There is another question that shows one way to use it here.

look here

You can also try using cellTemplate to setup your own template for how to render the cell.

Answer 2

You can use row template like this:

function rowTemplate() {
    return '<div ng-class="{\'ui-grid-row-bg-red\':row.entity.isError" >' +
                 '<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 then define ui-grid-row-bg-red in css:

.gridStyle .ui-grid-row-bg-red .ui-grid-cell {
    background-color: #872f2f;
    color: #fff;
 }