jqGrid with custom cell colors

Question

Is it possible in jqGrid(jquery grid http://www.trirand.com/blog/) to have custom cell text colors e.g. in price column i want red if price > 100$ and green if price < 50$ else grey?

More generally do

1. jqGrid provides hooks to change grid cellview, e.g. i can register a callback whenver cells of price column are created or modified.

2. or is it possible to have separate model and view (client side) e.g. from server i can send two data for each row i.e. how to display and what to display

Edit: so here is an example showing the sample formatter, which colors the cell based on value

function infractionInFormatter(el, cellval, opts)
{
    $(el).html(cellval).css('color',infraction_color_map[cellval]);
}

colModel :[ 
    ...
    {name:'date', index:'date', width:120, date:true}, 
    {name:'inf_out', index:'inf_out', width:60, formatter:infractionInFormatter,},
    ...
],

Answer 1

Yes, you can do that. Write a custom formatter. This is just a function that you pass a reference to in your colModel. You get a reference to the final cell selector in the function, so anything you can do with jQuery you can do in a formatter. Including change the color/style.

Answer 2

ok, may you put an example of how to make this function?

Answer 3

Hi, I would set a red background colour if a cell has xxx value, else a green background if the value is yyy.

I have wrote this code:

.....
colModel:[
    {name:'id',index:'id', width:15,hidden:true, align:"center"},
    {name:'title',index:'title', width:150, align:"center"},
    {name:'start',index:'start', width:350, align:"center", sorttype:"date"},
    {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"},
    {name:'completed',index:'completed', width:120, align:"center",formatter:infractionInFormatter},        
    ],
.....

And this function like your example:

function infractionInFormatter(el, cellval, opts)
        {
            .....
        }

How I have to set it?

Thanks a lot.

Answer 4

You can also specify the class in the colModel:

colModel: [
           {name:'field_x', index:'field_x',  align: 'left',  width:  35, classes: 'cvteste'},
          .....