How to customize angular ui-grid row background color?

Question

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
    }
],

Possible duplicate of How to color row on specific value in angular-ui-grid? — Guillaume Georges
– Guillaume Georges, Commented Oct 20, 2017 at 15:22
wouldn't add a line such as "background-color": #2dff07 work? — n4feng
– n4feng, Commented Oct 20, 2017 at 15:32

B.G. · Accepted Answer · 2017-10-20 16:24:37Z

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

answered Oct 20, 2017 at 16:24

B.G.

715 bronze badges

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

Collectives™ on Stack Overflow

How to customize angular ui-grid row background color?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related