Unable to set currency and culture to en-GB

[Amrit Lal]

Hello Syncfusion experts,

I am using the Syncfusion grid and noticed that the currency format always uses the $ sign instead of £.

I found another thread in the forum which suggested to use the following in app.component.ts:

declare const require: any;
setCulture('en-GB');
setCurrencyCode('GBP');
loadCldr(
  require('cldr-data/main/en-GB/currencies.json'),
  require('cldr-data/main/en-GB/numbers.json'),
  require('cldr-data/main/en-GB/ca-gregorian.json'),
  require('cldr-data/main/en-GB/timeZoneNames.json'),
  require('cldr-data/supplemental/numberingSystems.json'),
  require('cldr-data/supplemental/weekData.json'),
);
L10n.load(require('@syncfusion/ej2-locale/src/en-GB.json'));

Unfortunately, this does not work for me. The grid still shows the currency as $ for me.

I am using the following package versions at the moment.

"@syncfusion/ej2-angular-grids": "^23.1.41",
"@syncfusion/ej2-angular-layouts": "^23.1.36",
"@syncfusion/ej2-angular-navigations": "^23.1.40",
"@syncfusion/ej2-angular-popups": "^23.1.38",
"@syncfusion/ej2-base": "^23.1.40",
"@syncfusion/ej2-locale": "^23.1.38",
"cldr-data": "^36.0.1",

with Angular v17.0.0-rc.0

Have there been changes to how the culture works in the latest version?

Please help.

Edit:

I also hoped that importing the packages with import,as shown below, might help, but it did not.

import
*as currencies from'cldr-data/main/en-GB/currencies.json';
import*as gregorian from'cldr-data/main/en-GB/ca-gregorian.json';
import*as locale from'@syncfusion/ej2-locale/src/en-GB.json';
import*as numberingSystems from'cldr-data/supplemental/numberingSystems.json';
import*as numbers from'cldr-data/main/en-GB/numbers.json';
import*as timeZoneNames from'cldr-data/main/en-GB/timeZoneNames.json';
import*as weekData from'cldr-data/supplemental/weekData.json';
setCulture('en-GB');
setCurrencyCode('GBP');
loadCldr(currencies, numbers, gregorian, timeZoneNames, numberingSystems, weekData);
L10n.load(locale);

This did not work either.

[Dineshnarasimman Muthu]

Hi Amrit Lal,

Greetings from Syncfusion Support.

We have reviewed your query and understood that you need to set GBP(Great Britain Pound) symbol instead of dollar symbol. This requirement is achieved by using setCurrency() method and currency property in the column.format. The code snippet of the implementation and the sample have been attached for your reference. The documentation of the internationalization has been attached for your reference.

 

  setCulture('en-GB');

    setCurrencyCode('GBP');

    loadCldr('./currencies.json', './numbers.json', './ca-gregorian.json');

    this.data = data;

    this.formatOptions = {

      format: 'C2',

      useGrouping: false,

      minimumSignificantDigits: 1,

      maximumSignificantDigits: 4,

      currency: 'GBP',

    };

 

Sample: https://stackblitz.com/edit/angular-akffo2-sjq7z6?file=src%2Fapp.component.ts,src%2Fcurrencies.json

  

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/global-local#internationalization

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

[Amrit Lal]

Dear Dineshnarasimman M,

Thank you for helping me out with this one.

The formatOption works, but now it raises more questions.

I noticed that setCulture(), setCurrencyCode() and loadCldr() hold no importance in setting the currency format. I removed these function calls and the column was still formatted based on the formatOptions that was set on the column.

My understanding was that by configuring the culture and currency-code, the entire Syncfusion framework would use the en-GB locale, or whatever locale is set. The column-specific formatOption should be used if one would want to override it, for example, to show the dollar sign just in one particular column.

Why can't the Syncfusion grid set the currency appropriately just based on the culture and currencyCode with the cldr?

Thanks,
Amrit.

[Amrit Lal]

Hi Dineshnarasimman M,

Do you have any updates on this issue?

Thanks,

Amrit.

[Dineshnarasimman Muthu]

Hi Amrit Lal,

Sorry for the delay response. To change the currency in the grid, you can use setCurrencyCode and setCulture method and the currency property in the column.format is for formatting purpose. setCurrencyCode() method is helps us to set global currency codes, whereas the currency property in the column.format is for manipulating the number format. The documentation for the Internalization has been attached where every detail about changing the culture and currencyCode and manipulating the number formats are provided.

Documentation: https://ej2.syncfusion.com/angular/documentation/common/internationalization#setting-currency-code

Regards,

Dineshnarasimman

[Amrit Lal]

Hi Dineshnarasimman,

Thank you for your response.

I had already gone through the documentation for internationalisation when I had posted this question. This question specifically states that the setCulture() and setCurrency() methods do not work. 

It is also proven in the working example that you have sent. If you remove the column formatting, the setCurrency() method, which is expected to set the currency globally for the Syncfusion framework, does not have any effect.

Do you have any working example which only uses setCulture() and setCurrency() methods, without any column formattings and still be able to change the currency code for the grid?

Thanks,

Amrit.

[Amrit Lal]

Hi Dineshnarasimman,

Do you have any answer to this?

Thanks,

Amrit.

[Pavithra Subramaniyam]

Amrit Lal,

By default, the EJ2 currency code will be USD and the default locale will be “en-US”. So, when you format a number to currency the “$” sign will be added. While setting a currency code and locale globally the currency formatting will be added based on the CLDR file “currencies.json” only. So if you removed the setCulture(), setCurrencyCode(), and loadCldr()  functions and set the column formatting currency code as “GBP” then the "£" symbol will be added as per the “en-US” culture. This is the default behavior.

https://stackblitz.com/edit/angular-akffo2-2vsywv?file=src%2Fapp.component.ts