Forum
Log In
Home
Topic RSS
21:47
28/03/2010
Offline
I have a date sorting problem I can't work around. I can't make date formatting and sorting work together. I can get the sorting to work, and I can get the formatting to work. But when I try to sort dates in format "d/m/y" they sort as strings.
I use jqGrid 3.6.4, and the problem occurs with both jQ 1.4.2(jQueryUI 1.8) and 1.3.2(jQueryUI 1.7.2). I am pretty confident I have downloaded the appropriate modules.
I changed the date format in grid.locale-en.js to:
srcformat: "Y-m-d",
newformat: "d/m/y",
When sorting by date, 4 Oct 2010 should be at the bottom of the list.
NB I actually want to make this work within tableToGrid. I can't make it work there, but I thought if it can be fixed here then it should be OK to use from within tableToGrid
Does anyone have any ideas?
Here's the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Testbed</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/thirdParty/jqGrid/ui.jqgrid.css" >
<script type="text/javascript" src="/thirdParty/jqGrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/thirdParty/jqGrid/jquery.jqGrid.min.js"></script>
<style type="text/css">
body {font-size: 62.5%; }
</style>
<script type="text/javascript">
$().ready(function()
{
$("#Table_JSON").jqGrid(
{
caption: "Manipulating Array Data - JSON",
datatype: "local",
sortable: true,
colNames: ['Inv No','Date', 'Client', 'Amount','Tax','Total 2','Notes'],
colModel: [
{name:'id',index:'id', width:160, sorttype:"int"},
{name:'invdate',index:'invdate', width:110, formatter:'date', sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right", sorttype:"float", formatter:'currency' },
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
]
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"1000",total:"210"},
{id:"10",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20",total:"320"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30",total:"430"},
{id:"4",invdate:"2010-10-04",name:"test",note:"note",amount:"200.00",tax:"10",total:"210"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"this is a longer note2",amount:"300.00",tax:"20",total:"320"},
{id:"6",invdate:"2007-9-06",name:"test3",note:"note3",amount:"400.00",tax:"30",total:"430"}];
for(var i=0;i<=mydata.length;i++)
$("#Table_JSON").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
</head>
<body>
<table id="Table_JSON">
</table>
</body>
</html>
19:56
Moderators
30/10/2007
Offline
Hello,
Use the datefmt option in colModel
http://www.trirand.com/jqgridw.....el_options
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
01:36
28/03/2010
Offline
Brilliant, thanks for your help. Works OK as follows:
$("#MarkupTable").jqGrid('setColProp','Date',{sorttype:'date', formatter:'date', datefmt: 'd-m-y'});
A few observations that might help others:
- I do notice that the date handling is quite fussy when datatype is "clientSide". When row content comes from HTML markup (using tableToGrid), the datefmt doesn't get used for actual formatting - that gets taken from the HTML markup, but the datefmt property is still required to make the sorting work.
- Similarly, if data is imported in JSON using the 'addRowData' function, the formatting seems to be determined by the value of newformat in the localisation file e.g. grid-locale-en.js
- The demos all seem to have dates formatted as Y-m-d, which will sort correctly as string-text, so I think the date-format demo code is often incorrect and the data is only correctly sorted because the text sorting produces the same results as date sorting for the given data and configuration parameters. Definitely worth changing example formatting as this is the only way to illustrate the code working correctly.
Most Users Ever Online: 715
Currently Online:
52 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
