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?

You should just use `'background-color'` instead of `'color'` and set additional style `'background-image':'none'` to remove the background image inherited from the jQuery UI class 'ui-widget-content'. If you want additionally use standard color for hovering or/and selected rows you can use technique which I described in http://stackoverflow.com/questions/4956949/make-selected-color-highest-level-in-jqgrid/4960622#4960622 — Oleg, Feb 10 '11 at 19:28
@Oleg - background-color is only for the span (not the whole TD cell) — leora, Feb 12 '11 at 21:22
@ooo: In your question you wrote, that you want/have to use custom formatter. The text returned by the custom formatter will be placed in the `` cell. So in the way you have no chance to change the `` itself. Maximum what you can do is to place any element like `` which could have the whole size of the `` (depend on the used CSS). In the case the background of `` will be seen for the user exactly like the cells background. Using custom formatter you can not do more. — Oleg, Feb 12 '11 at 21:28
@Oleg - thanks for the example (and your patience).. very helpful indeed — leora, Feb 13 '11 at 00:18

score 20 · Accepted Answer · edited May 23 '17 at 12:34

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: enter image description 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.

chasew · Answer 2 · 2012-06-13T20:23:24.440

1

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});
        }
...
});

edited Jun 13 '12 at 20:23

answered Jan 01 '11 at 19:44

chasew

8,438
7
41
48

simplyharsh · Answer 3 · 2010-07-14T10:00:59.323

0

Here

$("#cell").setCell(Row , Column, Value, { background: '#888888'});

Actually you won't even need custom formatter, if you just intend to do it for setting colors. You can even set color value from here like,

var color = (Value == "Y") ? "green" : "red";
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});

Happy Coding.

edited Jul 14 '10 at 10:00

answered Jul 14 '10 at 09:41

simplyharsh

35,488
12
65
73

@harshh - are you saying to put this line in my custom formatter code function? – leora Jul 14 '10 at 09:46
@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 ? – leora Jul 14 '10 at 10:04
@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 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods for details). You can also use 'formatter:checkbox' additionally. – Oleg Jul 14 '10 at 10:09
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. – Oleg Jul 14 '10 at 10:21
@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 – leora Jul 14 '10 at 10:25

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

3 Answers3

Linked