How can I change the background color of a cell in a jqgrid custom formatter?

Question

I can change the text color by doing this in jqgrid custom formatter:

function YNFormatter(cellvalue, options, rowObject)
{
    var color = (cellvalue == "Y") ? "green" : "red";
    var cellHtml = "<span style='color:" + color + "' originalValue='" +
                                cellvalue + "'>" + cellvalue + "</span>";

    return cellHtml;
 }

but I want to now change the background color of the whole cell (instead of the text color).

Is this possible?

Solution 1

If you want use <span> element inside of the custom cell formatter you can return from the custom formatter

return '<span class="cellWithoutBackground" style="background-color:' +
       color + ';">' + cellvalue + '</span>';

where the style of span.cellWithoutBackground you can define for example like following

span.cellWithoutBackground
{
    display:block;
    background-image:none;
    margin-right:-2px;
    margin-left:-2px;
    height:14px;
    padding:4px;
}

How it works you can see live here:

UPDATED: The answer is old. The best practice would be to use cellattr callback in colModel instead of the usage custom formatters. Changing of background color of the cell is in general just assigning style or class attribute to the cells of the column (<td> elements). The cellattr callback defined in the column of colModel allows exactly to do this. One can still use predefined formatters like formatter: "checkbox", formatter: "currency", formatter: "date" and so on, but still change the background color in the column. In the same way the rowattr callback, which can be defined as the jqGrid option (outside of specific column of colModel), allows to assign style/class of the whole row (<tr> elements).

More information about cellattr can be found here and here, for example. Another answer explains rowattr.

Solution 2

Here is what I did:

jQuery("#grid_id").jqGrid({
    ...
       colModel: [
          ...
          {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter},
          ...
       ],
        afterInsertRow: function(rowId, data)
        {
            $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX});
        }
...
});

Comments

[leora]

@harshh - are you saying to put this line in my custom formatter code function?

[leora]

@harshh - i actually want to do it as a custom formatter as i have some conditional logic based on other data properties. Also,where are you getting Row, Column and Value from ?

[Oleg]

@ooo: You should don't use custom formatter. Instead of that you can change the background color of some cells inside of loadComplete event. You can get ids of the loaded data with respect of getDataIDs method, then get the cell data in a loop with getCell examine there and change style of cell with setCell using empty string as a data parameter (see trirand.com/jqgridwiki/doku.php?id=wiki:methods for details). You can also use 'formatter:checkbox' additionally.

[Oleg]

You can use any jqGrid features which you like. Usage of custom formatting is in general to produce a HTML code for a cell. To set background color it is enough only set a CSS class on the cell. I would define in you CSS two classes "redBackground" and "greenBackground" and set on the cell only one from the classes. As a formatter I'll use 'formatter:checkbox'. You can do what you prefer.

[leora]

@Oleg - i am doing this in combination with other text formatting on the cell so i already am using a custom formatter. because of this i hoped there was one extra line that allowed me to add background color in this custom formatter function