Arian Arian -4 years ago 52
CSS Question

jqGrid : How to add CSS class for a row with specific criteria

Please consider this scenario:

I have an array an I want to show it using jqGrid:

var arr = [
{ Id: 1, Name: "J1" , Age: 40},
{ Id: 2, Name: "J2" , Age: 50},
{ Id: 3, Name: "J3" , Age: 60},
{ Id: 4, Name: "J4" , Age: 70},
{ Id: 5, Name: "J5" , Age: 80},
];


I want to use bootstrap styles for my grid and I want to add CSS class based of some criteria for rows. For example:

Criteria CSS class
----------------------------
Age >= 80 table-danger
70 <= Age < 80 table-warning
60 <= Age < 70 table-info


How I can add this CSS class for my grid?

Thanks

Answer Source

You should use rowattr which informs jqGrid which additional attributes (class, title, style and so on) should be assigned to the rows of the grid during generating the rows. An example of the callback is the following

rowattr: function (item) {
    if (item.Age >= 80) {
        return { "class": "table-danger" };
    } else if (70 <= item.Age && item.Age < 80) {
        return { "class": "table-warning" };
    } else if (60 <= item.Age && item.Age < 70) {
        return { "class": "table-info" };
    }            
}

See the old answer for a code example.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download