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.

enter image description here

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.

enter image description here

Community · Accepted Answer · 2017-05-23 11:53:02Z

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.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Mar 18, 2015 at 17:35

Scott

1,6904 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhavjot · Accepted Answer · 2016-11-25 03:04:51Z

0

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

answered Nov 25, 2016 at 3:04

Bhavjot

6726 silver badges16 bronze badges

Collectives™ on Stack Overflow

Row Color based on data property in Angular UI-Grid

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related