0

I am trying to change background color of angular ui-grid row based on condition so if riskValue is 1 trying to make it red and if value is 2 row background color should be Yellow. Any easy way to achieve this task ?

config.js

"columnDefs": [{
        "name": "Ticket Number",
        "field": "ticketNum",
        "width": 120
    },
    {
        "name": "Asset Id ",
        "field": "assetID",
        "width": 100
    },
    {
        "name": "Severity",
        "field": "severity",
        "width": 100
    },
    {
        "name": "Risk Index",
        "field": "riskIndex",
        "width": 100
    },
    {
        "name": "Risk Val",
        "field": "riskValue",
        "cellTemplate": "<div ng-if=\"row.entity.Comments_Col1 != 'none'\" title={{row.entity.riskValue}} \" ><div style='white-space:nowrap;border-bottom: 1px solid red !important; height:100%;width:100%;'>{{row.entity.riskValue}}</div></div>",
        "sort": {
            "direction": "aesc",
            "priority": 0
        },
        "width": 100,
        "visible": false
    }
],
hussain
  • 6,587
  • 18
  • 79
  • 152
  • 3
    Possible duplicate of [How to color row on specific value in angular-ui-grid?](https://stackoverflow.com/questions/26362666/how-to-color-row-on-specific-value-in-angular-ui-grid) – Guillaume Georges Oct 20 '17 at 15:22
  • wouldn't add a line such as "background-color": #2dff07 work? – n4feng Oct 20 '17 at 15:32

1 Answers1

2

You can use gridOptions.cellClass

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.entity.riskValue === 1) 
        return 'red';
    if (row.entity.riskValue === 2)
        return 'yellow';
}

where red and yellow are css classes.

This method requires adding the function to all of your columnDefs but allows to choose only some columns, which should have changed background color.

Sample: http://plnkr.co/edit/Xie68a3sT9CXTdCuI3tq?p=preview

B.G.
  • 71
  • 5