How to color column conditionally with select edit-type and without custom formatter

Question

I would like to color column text conditionally with select edit-type. If I use custom formatter then value get changed. Below is my code snippets which don't work,

    function generateEventHandlerGrid(eventsJson){
        var eventGrid = $("#eventGrid");
           eventGrid.jqGrid({
               datatype: 'local',
               data: eventsJson.eventInfo,
             jsonReader: {repeatitems: false},
    colNames: ['Event Category', 'Event Creation'],
{name: 'eventCategory', index: 'eventCategory',align:"center"},
{name: 'enabled', index: 'enabled', width:"100px",align:"center",editable:true,edittype: 'select',
                 editoptions: {value: "1:Enable;0:Disable"}, formatter: function ( cellvalue, options, rowObject ){
                    if (rowObject.enabled == 1){
                       var cellHtml = "<span style='color:" + "red" + "' originalValue='" + rowObject.enabled + "'>" + "Enable" + "</span>";
                       return cellHtml;
                    }else{
                       var cellHtml = "<span style='color:" + "green" + "' originalValue='" + rowObject.enabled + "'>" + "Disable" + "</span>";
                       return cellHtml;
                    }
                 }}],
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    shrinkToFit: false,
               height: strMinimumHeight,
               editurl: "clientArray",
               restoreAfterSelect: false,
               loadonce: true,
    }

How to set text color based on value without custom formatter?

Answer 1

The goal of custom formatter is formatting of content of the cell. What you try to do in your current code is setting of style attribute on the outer DOM element in the cell. The best feature for that is cellattr callback. Thus you can still use some formatter, for example, format the content as date and still set some style or class, which changes attribute of the cell.

The exact list of parameters of cellattr callback depends from the version and the fork of jqGrid, which you use. You can try to replace formatter with cellattr with the following code

cellattr: function (rowid, cellValue, rowData, cm, item) {
    return " style='color:" + (rowData.enabled == 1 ? "red" : "green") + "'";
}