how would you colorize specific jqgrid cell text

Question

I have a stored procedure (sql server 2008) that returns the status of (4) different fields into a single column of a jqgrid, like Good/Bad/Good/Bad. What I would like to do is have the Good text display in Green and the Bad text display in Red. I could separate them into different columns and then set the color of each, but I prefer to have a single column. Can I set this value in the stored procedure, or wrap this in the class with html to do this?

Is this possible?

Thank you.

Answer 1

You can use custom formatter for doing this like follwing.

{ name: 'status', index: 'status', formatter:colorFormatter}

colorFormatter function looks like following.

function colorFormatter (cellvalue, options, rowObject)
{
   var data = cellvalue.split('/');
   var length = data.length; 
   var new_format_value='', text, color, separator='/'; 

   for(var i=0; i<length; i++) {
       var text=data[i]; 
       text=='Good'?
           color='style="color:green;"':
           color='style="color:red;"';

       if(i==length-1) separator='';    

       new_format_value+='<span '+color+'>'+text+'</span>'+separator;
   }

   return new_format_value
}

JS Fiddle link: http://jsfiddle.net/yNw3C/12221/