How to set caption template on grid/groupsettings?

Question

So I'm trying to modify the template. Right now I have something like "MY_ID: 11111 - 5 items" where MY_ID is the column I'm grouping on, 11111 is the value of that column, and 5 is the number of items in the grid group. I would like to change this to something like "MY_ID of 11111 contains 5 items". If there is only one item in the grid group then it should say "MY_ID of 11111 contains 1 item". What groupSettings.captionTemplate should I use for this?

Mohammed Farook J · Answer

Hi Tony,

Thanks for contacting Syncfusion Supports.

We have validated your requirement, you can use the template if statement to set singular and plural sentence based on the group item count. Please find the code example and sample for your reference

[html]

${field} of ${key} contains ${count} ${if(count===1)} item ${else}items

${/if}

</script>

[ts]

import { Grid, Group } from '@syncfusion/ej2-grids';

import { data } from './datasource'

Grid.Inject(Group);

let grid: Grid = new Grid({

dataSource: data,

allowGrouping: true,

groupSettings: { captionTemplate: '#captiontemplate', columns: ['EmployeeID'] },

columns: [

{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },

{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },

{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },

{ field: 'ShipCity', headerText: 'Ship City', width: 120 },

{ field: 'ShipCountry', headerText: 'Ship Country', width: 120 },

],

height: 315

});

grid.appendTo('#Grid');

Sample : https://stackblitz.com/edit/xnxmd9?file=index.ts

Regards,

J.Mohammed Farook

Tony Waterman · Answer

Thanks!

Mohammed Farook J · Answer

Hi Tony, 
Thanks for your update. We are happy to hear that the provided solution helped you. 
Please let us know if you have any queries. 
 
Regards, 
J.Mohammed Farook