We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Grouping with Different Date Format :: Javascript

Hi Team,

Initially grid loading with column datetime format (dd-MMM-yy HH:mm:ss). I want group the datetime column with another format (dd-MMM-yy). Please provide me solution ASAP.

Ikrmdw (forked) - StackBlitz

Initial format is (dd-MMM-yy HH:mm:ss)


I want that column to be group with "dd-MMM-yy" format.


1 Reply

RR Rajapandi Ravi Syncfusion Team November 3, 2022 09:40 AM

Hi Durai,


Greetings from Syncfusion support


From your query we could see that you like to apply the custom format in the group caption, you can customize the group caption as you want by using the groupSettings.captionTemplate property. We have modified your shared sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


 

let grid: Grid = new Grid({

  dataSource: data,

  allowGrouping: true,

  groupSettings: {captionTemplate: "#captiontemplate"},

  columns: [

    {

      field: 'OrderDate',

      headerText: 'Order Date',

      width: 180,

      textAlign: 'Right',

      format: { format: 'dd-MMM-yy HH:mm:ss', type: 'datetime' },

    },

  ],

});

grid.appendTo('#Grid');

 


Index.html

 

<script id="captiontemplate" type="text/x-template">

    ${groupTemplate(data)}

</script>

<script type="text/javascript">

    function groupTemplate(args) {

    let monthNames =["Jan","Feb","Mar","Apr",

                      "May","Jun","Jul","Aug",

                      "Sep", "Oct","Nov","Dec"];

   

    let day = args.key.getDate();

   

    let monthIndex = args.key.getMonth() + 1;

    let monthName = monthNames[monthIndex];

   

    let year = args.key.getFullYear();

   

    return args.field + ': ' + `${day}-${monthName}-${year}` + ' - ' + args.count + "- items";

    }

</script>

 


Sample: https://stackblitz.com/edit/eucwku-dsj1yf?file=index.html,index.ts


Screenshot:



Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon