CODEWITHSUNDEEP
jqgrid
VPP
VPP

Reputation: 9

Jqgrid: changing row color dynamically

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?

Upvotes: 0

Views: 8422

Answers (3)

Mohamed Farag
Mohamed Farag

Reputation: 139

Use cellattr property in colModel

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

Upvotes: 0

Piyush Sardana
Piyush Sardana

Reputation: 1758

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.

Upvotes: 1

Chad Ferguson
Chad Ferguson

Reputation: 3091

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},
      ...
   ]

Upvotes: 1

Related Questions