How to apply formatting for the group caption template

3 mins read

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).

Solution

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)}
    </script>
    <div id="Grid">
    </div>

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 }
        ]
    });
grid.appendTo('#Grid');

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;

}

Output

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

Did you find this information helpful?

Yes