jQuery UI Widgets › Forums › Grid › Grouping by dates
Tagged: formatDate, grid, groups renderer, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by ngchagas 10 years, 7 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorGrouping by dates Posts
-
Hi,
the line below doesn’t work for grouping dates with groupsrenderer.
The date is not displayed in the correct format when grouping.
Is there any example that can help me?
Regards,dataAdapter.formatNumber(group, data.groupcolumn.cellsformat)
Hello ngchagas,
You can use “formatDate” function which returns a formatted JavaScript Date object as a String.
Here is an example how to change date format when grouping by date:<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.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="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(5); var source = { localdata: data, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); var toThemeProperty = function (className) { return className + " " + className + "-" + theme; } var groupsrenderer = function (text, group, expanded) { // return "" + group + ""; return dataAdapter.formatDate(group, "dd.MM.yyyy"); } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, groupable: true, groupsrenderer: groupsrenderer, selectionmode: 'singlecell', groups: ['date'], columns: [ { text: 'First Name', groupable: true, datafield: 'firstname', width: 90 }, { text: 'Last Name', groupable: true, datafield: 'lastname', width: 90 }, { text: 'Product', groupable: false, columntype: 'dropdownlist', datafield: 'productname', width: 180 }, { text: 'Ship Date', groupable: true, datafield: 'date', width: 90, cellsalign: 'right', cellsformat: "ddd.MMM.yyyy" }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right'}, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'} ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank you.
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.