jQuery UI Widgets Forums Grid Grouping by dates

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)
  • Author
  • Grouping by dates #60824

    ngchagas
    Participant

    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)

    Grouping by dates #60860

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Grouping by dates #60917

    ngchagas
    Participant

    Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.