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