How to sort “days ago” formatted date in jqGrid?

Question

How can I sort the "days ago" formatted date in jqGrid ? When I sort the grid currently, it can't distinguish between "11 hours ago" and "1 days ago". So "1 day ago" is sorted on the top instead of "11 hours ago".

**Please refer this image of the grid.

My jqGrid has the following code. recommendationData is JSON. Posted column is the date.

$("#tblRecommendationList").jqGrid({
    data: recommendationData,
    datatype: 'local',
    colModel: [
        { name: 'Title', label: 'Title', width: 210, resizable: true },
        { name: 'Channel', label: 'Content Type', width: 120, resizable: true },
        { name: 'StatusNumber', label: 'Status', width: 120, resizable: true,
            formatter: GetStatusCode },
        { name: 'Posted', label: 'Posted', width: 120, resizable: true },
        { name: 'RecordId', label: 'RecordId', hidden: true }
    ],
    loadtext: 'Loading...',
    loadui: 'block',
    emptyDataText: "No Recommendations to display",
    shrinkToFit: true,

The date is passed in the following manner.

    ...
        returnList =
            (
                from i in responseList
                select new InQuiraRecommendation
                {
                    StatusNumber = i.statusnumber,
                    Title = i.title,
                    Text = i.text,
                    Posted = GetDaysAgo(i.dateadded),
                    CaseNumber = i.casenumber,
                    Priority = i.priority,
                    Channel = i.channel,
                    RecordId = i.recordid,

                }
            ).ToList();
    }
    return returnList;
}

GetDaysAgo( ) changes the "2012-09-13 07:00:00 Etc/GMT" date format to "Days ago" format.

Answer 1

The problem starts with the usage of datatype: 'local' with the data prepared on the server. If you would uses datatype: 'json' the server would be responsible for sorting of the data and you could just returns correctly sorted data to jqGrid.

Another way would be to implement GetDaysAgo method, which converts dates posted back in ISO 8601 format to texts like "11 hours ago" or "1 days ago", on the client side as JavaScript code. So you can use custom formatter (and unformatter) to display the data.

One more option is to define your custom sorttype property for 'Posted' column defined as function. The function could returns for example the number of hours which will be used instead of texts "11 hours ago" or "1 days ago" for sorting by the column.

Here is the first reference to custom sorting and here you will find some code example which could help you. You can simplify the implementation of custom sorting (implementation of sorttype as function) if you would create hidden column with sortable string (ISO 8601 for example). Inside of sorttype function you have access to any other data of the row per the second parameter of sorttype (see here for more information). In the way you can just return ISO 8601 representation of 'Posted' (from hidden column) as the result of sorttype function.

Answer 2

I'd add 'dateadded' to your InQuiraRecommendation class and include that as a hidden field on your grid, then use that as your sort column.