jqGrid - Conditionally format cell based off Date value

Question

I've seen a decent amount of info surrounding the conditional formatting but can't seem to get it to work. I want to make the font of the cell red when it's value (which is a date) is in the past.

This is a general idea of what I have now:

{
              name: 'IsoDate', index: 'IsoDate', align: 'left', sorttype: 'date', datefmt: "m/d/Y",
              formatter: function (cellvalue, options, rowobject) { var now = new Date(); if (cellvalue < now) { return '<span class="error">' + cellvalue + '</span>'; } else { cellvalue; } }
          }

I can't seem to get it to work though. I've gotten it to return all red values, or all undefined values. There are some fields with no dates yet.

I'd appreciate any help! Thanks!

UPDATE:

Here is the code I used that ended up working. I actually was referencing another column for the date.

cellattr: function (rowid, val, rawObject, cm, rdata) {
                  var idate = new Date(rawObject['IsoDate']);
                  return (idate < new Date()) ? ' class = "ui-state-error-text"' : ' class = "field-validation-green"';
              }

It's better to use `rawObject.IsoDate` syntax instead of `rawObject['IsoDate']` — Oleg, Nov 18 '13 at 15:08

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

It's better to use cellattr instead of custom formatter. In the case you can still use predefined formatter like formatter: "date" and just set additional style or class attribute on the selected <td> cells. For example the class ui-state-error-text seems to me good choice to make the font of the cell red. So the definition of the column could be

{
    name: "IsoDate", sorttype: "date",
    formatter: "date", formatoptions: {newformat: "m/d/Y"},
    cellattr: function (cellvalue) {
        return (cellvalue < new Date()) ? ' class="ui-state-error-text"' : '';
    }
}

I am not sure which data have you as input and whether the code which you posted works correctly. If required you can change the above code correspond with the format of cellvalue which you have.

See the answer, this one, this one and many other for more example of usage cellattr.

edited May 23 '17 at 10:34

Community

1
1

answered Nov 15 '13 at 17:30

Oleg

220,925
34
403
798

I think it might just not be evaluating the date comparison correctly. I'm not 100% sure why though because it is looking at a js viewmodel where the isodate is defined as a Date. – mrshickadance Nov 15 '13 at 19:19
@mrshickadance: It's not important how you hold the data on the server. It's important how you fill jqGrid with the data. Could you include an example of `cellvalue` which you have inside of `cellattr`. For example you can include `alert(typeof cellvalue)` and `alert(cellvalue)` or just set breakpoint inside of `cellattr` callback and examine the type and the value of `cellvalue`. – Oleg Nov 15 '13 at 19:47
One thing I did change are the parameters; cellattr: function(rowid, val). If I do an alert on the val, the type is string, and 11/20/2013 would be an example of a value coming back. – mrshickadance Nov 15 '13 at 19:58
@mrshickadance: So you can use `valueParts = cellvalue.split("/")` to convert `cellvalue` like `"11/20/2013"` to array `["11", "20", "2013"]`. Now you can construct `Date` object with respect of constructor `new Date(year, month, day, hours, minutes, seconds, milliseconds);`: `new Date(Number(valueParts[2]), Number(valueParts[0])-1, Number(valueParts[1]))` – Oleg Nov 15 '13 at 20:18
Thanks for the tips. I'm just curious, since this seems complicated to compare some simple dates, why won't the dates compare? I changed the val that is coming in to a date object with (var valDate = new Date(val)). The type is an object and it prints out in the long date format, the same as a new Date() does...why don't those seem to work together when comparing? – mrshickadance Nov 15 '13 at 20:31
@mrshickadance: You are welcome! You main problem is that you use locale specific format of date. `new Date("11/2/2013")` can be converted to 11 Feb or to 2 Nov depend on settings of web browser (language, locale). Even English speaking countries use different format of data. So it's better to use [ISO 8601](http://en.wikipedia.org/wiki/ISO_8601) format of date (like `"2013-11-20"`) if you communicate between the server and the client (web browser). In any way all the above discussion is for from your question: Conditionally format cell based on the cell value. – Oleg Nov 15 '13 at 20:45

score 0 · Answer 2 · answered Nov 15 '13 at 17:24

0

You are missing the return keyword in the conditional statement. That's why you are only seeing "red" values.

Use:

else { return cellvalue; }

instead of:

else { cellvalue; }

answered Nov 15 '13 at 17:24

Donald T

10,234
17
63
91

jqGrid - Conditionally format cell based off Date value

2 Answers2