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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply formatting for the group caption template

Platform: JavaScript - EJ 2 |
Control: Grid

Group Caption Template:

Grid provides an option customize the Group caption values and it can be achieved using the captionTemplate of the groupSettings property of the Grid.

Problem discussion

Since the customization of the caption template left to the user-end, Grid will not internally process the value and change them to required format (as displayed in the respective Grid column).


To overcome the discussed problem, we can use the custom helper function with the caption template.

Render the Template in HTML

Declare the caption Template with the with the helper function .

    <script id="captiontemplate" type="text/x-template">
        GroupCaption: ${groupCap(data)}
    <div id="Grid">


Define the Grid

Define the Grid columns and captionTemplate with the required number of grouped columns (if needed).

let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15));
let grid: Grid = new Grid(
        dataSource: data,
        groupSettings: { captionTemplate: '#captiontemplate', columns: ['OrderID', 'OrderDate', 'Freight'] },
        allowGrouping: true,
        columns: [
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
            { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
            { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
            { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
            { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }



Define Helper function

Define the helper function that has been declared in the caption template.

(window as any).groupCap = (args) => {

    var formatDateValue;

    //your custom code

    let type: string = grid.getColumnByField(args.field).type;

    if (type === 'date' || type === 'datetime') {

        formatDateValue = new Internationalization().formatDate(args.key, { skeleton: 'yMd', type: 'date' });

    } else if (type === 'number' && grid.getColumnByField(args.field).format) {

        let intl: Internationalization = new Internationalization();

        let nFormatter: Function = intl.getNumberFormat({ format: grid.getColumnByField(args.field).format as string, currency: 'USD' });

        formatDateValue = nFormatter(+args.key);

    } else {

        formatDateValue = args.key;


    return formatDateValue;




Grouped Grid with the customized caption templates

Figure 1: Grouped Grid with the customized caption templates

Typescript demo: https://stackblitz.com/edit/rgfzza-nabzx1?file=index.ts

Angular Demo: https://stackblitz.com/edit/format-group-caption-ocx95o?file=app.component.ts

React Demo: https://stackblitz.com/edit/react-1dqrg8?file=index.js


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile