Jqgrid: changing row color dynamically - jqgrid

Question

I am using Jqgrid . I would like to change the row color based on a column value . I am able to change the class of the row based on this column value .But what I would require is to change the font color with the color value I get from server. How this could be done?

Answer 1

You can do this by using a column custom formatter.
The formatter will be a javascript function that you write using the following format:
function myformatter ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}
Where the grid will route these values:
cellvalue - is the value to be formatted.
options - is an object that contains information in regards to the
cell/row.
rowObject - is the row data in the format determined by your grid
datatype option.
So in your custom formatter you can take the cell value and apply either a class or inline font style to it, like so:
function myformatter ( cellvalue, options, rowObject )
{
if (cellvalue == "red")
return '<font color="red">' + cellvalue + '</font>';//or use classes
else
return '<font color="blue">' + cellvalue + '</font>';//or use classes
}
Then on your column definition you just specify which columns will be using this formatter, like so (add to any columns that requires a font color):
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:myformatter},
...
]

Answer 2

Or you can try this also, in loadComplete, get all the row ids of jqgrid like this
var allRowsOnCurrentPage = $('#grid').jqGrid('getDataIDs');
and lets say you have name and company column in jqgrid and there are two rows. For one row data is like this
Name:xxx Company:yyy
and for the second row you have data like this
Name:aaa Company:bbb
So you get the Name value inside a for loop
for(int i=1;i<=allRowsOnCurrentPage.length;i++)
{
var Name=$('#grid').jqGrid('getCell',i,'Name');
if(Name="aaa")
{
$('#grid').jqGrid('setCell',i,"Name","",{'background-color':'yellow');
}
}
code is not tested, but should work.

Answer 3

Use cellattr property in colModel
cellattr: function (rowId, value, rowObject, colModel, arrData){
return 'style=background-color:black;'; }