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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejGrid |
Published Date: September 19, 2018 |
Last Revised Date: September 25, 2018

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:

ADD COMMENT
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
Live Chat Icon