How to set different currency format for columns and summary column values

This documentation explains about how to set different currency format for grid columns and its summary value.

Solution:

By default, the format property formats the value based on culture set to the Grid. For currency formats, currency depends upon the culture and hence by default we cannot show different currencies for multiple columns in same grid with a culture set. You can use following solution to show different currency formats for multiple column.

We can achieve this requirement by using queryCellInfo and load event of the grid. In queryCellInfo event we have changed the format of the particular column values by using ej.format method. We have created the helper functions in Grid load event and used that helper functions in the Grid summaryTemplate to change the format of the summaryValues.

Note: We need to refer the respective culture script files to the sample to get the respective format.

HTML

JS

1. Render the Grid control with the querCellInfo event and load event.

Razor

Controller

ASPX

Controller

Core

Controller

QueryCellInfo event

2. Changing the format of the grid column values

Load event

3. Creating the helper functions

Templates

4. Using the created helper functions in summary template.

Angular

We have used same queryCellInfo event to change the particular column values format in angular. But in summaryValue, we have used angular custom pipes in ng-template to achieve this requirement.

1. Render the Grid control with the querCellInfo event.

Typescript

QueryCellInfo event

2. Changing the format of the grid column values.

Angular custom pipes

3. Creating the angular custom pipe.

Angular template

4. using the created custom pipe in ng-template.

The following screenshot describes the above behavior: