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

Question

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

score 2 · Accepted Answer · answered Jun 11 '17 at 09:30

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.

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

1 Answers1