Grouping with Dates for years/months

[jparsons_satuitParticipant]

Hi,
I am trying to expand on default grouping for dates. I would like to be able to group by a Year (and/or month) for a date. So all 2021 in group. Right now I can only seem to group by the exact date.
Has anyone had any experiences with this. I only see old posts from ~2013 saying that it isn’t supported. I am hoping something has been added in the 7+ years since.
Thank you!
John

[Yavor DashevParticipant]

Hi jparsons_satuit,

One easy solution if you want to have grouping by Year or Month is to add month and year datafields and then populate them with the respective year and months then use these datafields for the grouping.
I have made a quick code example for you :

    // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date'  },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'year' },//We add two additional datafields (year and month) which we will use in order to group the dates either by date or month
                    {name: 'month'}
                ],
                datatype: "array",
               
            };
     
           for (let i = 0 ; i < source.localdata.length ; i ++){
               //We populate the datafields with years and months and you can use the 'groups' property of the gird to choose to group by month or year.
               source.localdata[i].year = source.localdata[i].date.getFullYear();
                var options = { month: 'long'};
                source.localdata[i].month =new Intl.DateTimeFormat('en-US', options).format(source.localdata[i].date);
            }
           
            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                groupable: true,
               // groupsrenderer: render,
                selectionmode: 'singlecell',
                groups: ['month'],
                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: false, datafield: 'date', width: 90, cellsalign: 'right'},
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right'},
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'},
                  { text: 'Year', datafield: 'year', cellsalign: 'right', cellsformat: 'c2', hidden:true},//We use the hidden property of the columns so they are not displayed 
                  { text: 'Month', datafield: 'month', cellsalign: 'right', cellsformat: 'c2', hidden:true}
                ]
            });

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts