JQgrid : Change entire row's font color if one column is filled

nunu picture nunu · Feb 16, 2013 · Viewed 7.4k times · Source

I have read some post but I'm still can't follow due to i'm new in jqgrid. I have a jqgrid which have 5 columns, but 1 column is empty for the beginning. After do some update it would be filled.

I want JQgrid change the font color for this row, so if it is filled this row will be change the font color to blue.

jQuery("#list").jqGrid({
....
colModel :[ 
        {name:'prob_id', index:'prob_id', hidden:true, width:10}, 
        {name:'Model',index:'Model',width:100,editable:true,search:true,stype:'text',searchoption:{sopt:['cn']}}, 
        {name:'Serial', index:'Serial',width:80,editable:true,search:true,stype:'text',searchoptions:{sopt:['cn']}},
        {name:'Lotno', index:'Lotno', width:50, editable:true,
                 search:true,
                 stype:'text',
                 searchoption:{sopt:['cn']}},
        {name:'Detail', index:'Detail', hidden:true,width:70,formatter:myformat}
                                        ],
....

function myformat ( cellvalue, options, rowObject )
                {
                        if (!empty(cellvalue)){
                        return '<font color="blue">' + cellvalue + '</font>';//or use classes
                        } else{
                        return '<font color="black">' + cellvalue + '</font>';//or use classes
                        }
                }

I would like to change the font color for all rows that have a value for the Detail Field

but I get an error:

empty is not defined 

UPDATE

try this way : I'm decided to move the condition to :

function myformat ( cellvalue, options, rowObject )
                {
                        if (cellvalue == "closed"){
                        return '<font color="blue">' + cellvalue + '</font>';//or use classes
                        } else{
                        return '<font color="black">' + cellvalue + '</font>';//or use classes
                        }
                }

and it works, but it seems just one column which turn to blue, I want entire row which have condition CLOSED.

Answer

Kris picture Kris · Feb 18, 2013

Try afterInsertRow and setRowData like in the code given below

   afterInsertRow: function(rowid, rowData, rowelem) {
   var detail= rowData['Detail'];
   if(detail=="Closed"){
$(this).jqGrid('setRowData', rowid, false, { color: '#000' });
  }else {
$(this).jqGrid('setRowData', rowid, false, { color: '#FF0000' });
    }
    },

Remove gridView:true (afterInsertRow wont work if gridView is true)