3

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.


enter image description here

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
Nas
  • 33
  • 4

2 Answers2

1

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.

heisenberg
  • 9,665
  • 1
  • 30
  • 38
  • Thank you for your response. But I still need to use the "Posted" column to be able to sort date in Asc. or Desc. order. The date format should be in "days ago" format. How can I use the hidden "DateAdded" column to sort the "Posted" column ? – Nas Oct 18 '12 at 17:51
  • Probably a couple of ways to handle...I'd use onSortCol and change the index from Posted to your hidden date column when Posted is clicked. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events – heisenberg Oct 18 '12 at 18:07
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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Implemented the GetDaysAgo method as JavaScript and used custom formatter. Worked perfectly. Thank you very much Oleg. – Nas Oct 24 '12 at 14:22