CODEWITHSUNDEEP
jqueryjqgrid
lloydphillips
lloydphillips

Reputation: 2855

Modifying styles or appending a class for individual jqGrid rows

Is it possibly to modify the stlye or attach a class to specific rows in jqGrid? I've got a grid showing a bunch of invoices. If the invoice status (one of the columns) is listed as VOID I want the text in the row to be red. I'm looking at the afterInsertRow event at the minute which will allow me to check the data but I'm not sure if I can get to the actual 'row'. I did think that was what rowelem (the last parameter) was.

Thanks in advance Lloyd

Upvotes: 0

Views: 728

Answers (2)

lloydphillips
lloydphillips

Reputation: 2855

As an addition to Oleg's answer, which pretty much answered the question. I needed to go on and have only the 'Void' column text show in Red. I thought I'd post the code on how to do this in case anyone comes across this post:

if ($list.jqGrid('getCell',id,'InvoiceStatus') === 'Void') {
                $list.jqGrid('setCell',id,'InvoiceStatus','',{color: 'red'});
            }

it replaces the line of code in Oleg's example:

 $('#' + id, grid[0]).css ({color: 'red'});

Upvotes: 0

Oleg
Oleg

Reputation: 221997

You can test the value of invoice status inside of loadComplete event handler instead of afterInsertRow:

var grid = $("#list");
grid.jqGrid({
    // other jqGrid parameters
    loadComplete: function() {
        var ids = grid.jqGrid('getDataIDs');
        for (var i=0;i<ids.length;i++) {
            var id=ids[i];
            if (grid.jqGrid('getCell',id,'invoiceStatus') === 'VOID') {
                $('#' + id, grid[0]).css ({color: 'red'});
            }
        }
    }
});

The small demo which mark all lines having 'test' text in the 'Client' column you can see here live.

Upvotes: 2

Related Questions