jQuery UI Widgets › Forums › Grid › Sorting a date column with dates and string
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 7 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
I have a grid which gets the data from the server side in the form of JSON and the datatype of each field is being set from a DTO object. There is a date column where I have to display dates in MM/dd/yyyy format if the year is between 1980 and 2000, otherwise we have to display “Out of Scope”. If i set the data type of the column to string, then the sorting does not work properly (it sorts the column as a string but it needs to be sorted as a date). I tried to set the value of the date type column using a cell rendererer, but it blows up if i try to set a string in there and also while sorting. I tried several other things, but nothing works. Can someone kindly give me some pointers how to do it?
Thanks in advance.
Hello jquser123,
You should use cellsrenderer, as shown in the following example (based on the demo Sorting:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); var url = "../sampledata/orders.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: url, sortcolumn: 'ShipName', sortdirection: 'asc' }; var dataAdapter = new $.jqx.dataAdapter(source); var daterenderer = function (row, columnfield, value, defaulthtml, columnproperties) { var date = new Date(1996, 11, 31); if (value >= date) { return "Out of scope"; } else { return value; }; }; // create jqxgrid. $("#jqxgrid").jqxGrid( { width: 670, height: 450, source: dataAdapter, theme: theme, sortable: true, filterable: true, altrows: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 250 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd', cellsrenderer: daterenderer }, { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }, { text: 'Ship City', datafield: 'ShipCity', width: 100 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 101 } ] }); $('#events').jqxPanel({ width: 300, height: 80, theme: theme }); $("#jqxgrid").on("sort", function (event) { $("#events").jqxPanel('clearcontent'); var sortinformation = event.args.sortinformation; var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending"; if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) { sortdirection = "null"; } var eventData = "Triggered 'sort' event <div>Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "</div>"; $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>'); }); $('#clearsortingbutton').jqxButton({ height: 25, theme: theme }); $('#sortbackground').jqxCheckBox({ checked: true, height: 25, theme: theme }); // clear the sorting. $('#clearsortingbutton').click(function () { $("#jqxgrid").jqxGrid('removesort'); }); // show/hide sort background $('#sortbackground').on('change', function (event) { $("#jqxgrid").jqxGrid({ showsortcolumnbackground: event.args.checked }); }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div id="eventslog" style="margin-top: 30px;"> <div style="float: left; margin-right: 10px;"> <input value="Remove Sort" id="clearsortingbutton" type="button" /> <div style="margin-top: 10px;" id='sortbackground'> Sort Background</div> </div> <div style="margin-left: 100px; float: left;"> Event Log: <div style="border: none;" id="events"> </div> </div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.