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

Problem with internationalization, numbers don't follow period and comma rules


I'm trying to change grid currency format to show in spanish format, like this example: 3.550,10€

This is the code added to app.module.ts:

import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as currencies from 'cldr-data/main/es/currencies.json';
import * as cagregorian from 'cldr-data/main/es/ca-gregorian.json';
import * as numbers from 'cldr-data/main/es/numbers.json';
import * as timeZoneNames from 'cldr-data/main/es/timeZoneNames.json';
import * as numberingSystem from 'cldr-data/supplemental/numberingSystems.json';

// Syncfusion localization
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystem);

But this is the result: €3,550.00

I'm unable to show the number formatted for spanish culture.
No errors appear.


7 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 2, 2019 09:23 AM UTC

Hi Jose, 

Query : I'm trying to change grid currency format to show in spanish format, like this example: 3.550,10€ 

By default, we have applied number format based on the culture (CLDR data).We have created a sample for your reference in the below sample, we have load the Spanish culture CLDR files and apply locale as ‘es’ using setCulture method and apply currency code as “EUR” (its working as your expected). 

Please refer the below code example and sample for more information. 

import * as cagregorian from "./ca-gregorian.json"; 
import * as currencies from "./currencies.json"; 
import * as numbers from "./numbers.json"; 
import * as timeZoneNames from "./timeZoneNames.json"; 
loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files 
setCulture('es'); // Change the Grid culture 
setCurrencyCode('EUR'); // Change the currency code 

<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' allowPaging='true'  [allowResizing]="true" allowFiltering="true"> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' type='number' width='120' format='C'></e-column> 
            <e-column field='OrderDate' headerText='OrderDate' width='120' type='date' format='yMd'></e-column> 


Note : Could you please check and ensure whether did you load  correct es(Spanish) culture file in your sample and still if you are facing the issue then and share grid code example and package version for further analysis. 

Thavasianand S.  

JL Jose Luis Garcia January 2, 2019 08:19 PM UTC

Hi Thavasianand,

I've reviewed and follow your code but with the same result.
Date and numbers are not following spanish notation.

Attached you can find my module and component source code.

In my app.module.ts I'm loading angular locale configuration imports and settings, but I've tried to disable this part of code to discard any conflict and the result is the same.

Thank you for your help

Attachment: dashboard_7bdb2e74.zip

MS Madhu Sudhanan P Syncfusion Team January 3, 2019 06:17 AM UTC

Hi Jose, 

Query: I've reviewed and follow your code but with the same result. Date and numbers are not following spanish notation. 
We have validated your query and created local sample for your reference. For importing json files in your component file, you need to include the following file to your application.  
declare module "*.json" { 
        const value: any; 
        export default value; 
You need to load culture format files in ngOnInit function. Please find the below code example for your reference. 
[code example] 
declare var require: any 
import { Component, OnInit } from '@angular/core'; 
import { data } from './datasource'; 
import { loadCldr, setCulture, setCurrencyCode, Internationalization, L10n } from '@syncfusion/ej2-base'; 
  'es': { 
    'grid': { 
      'EmptyRecord': 'No hay registros para mostrar',            // for loading text translations 
      'GroupDropArea': 'Arrastre una columna aquí para agrupar', 
    'pager': { 
      'currentPageInfo': '{0} de {1} Page(s)', 
  selector: 'app-root', 
  template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' [allowPaging]='true'> 
export class AppComponent implements OnInit { 
  title = 'LocaleSamplenew'; 
  public data: Object[]; 
  ngOnInit(): void { 
    loadCldr(require('cldr-data/main/es/currencies.json'),                 //loading culture files for number formats. 
      this.data = data; 

Please find the below sample for your reference. 

Please get back to us if you need further assistance. 
Madhu Sudhanan P 

JL Jose Luis Garcia January 3, 2019 09:32 AM UTC

Hi Madhu,

Now it works!!!
I think the problem was loading cldr json files. With your sample works fine.

Thank you very much for your support!!

MS Madhu Sudhanan P Syncfusion Team January 3, 2019 09:54 AM UTC

Hi Jose, 
We are glad that your requirement has been achieved. 

FA Fabio replied to Madhu Sudhanan P October 27, 2022 08:16 AM UTC

Hi, i'm facing same issue but in tree grid. In grid this solution works but not for the tree grid. Any tips? Thanks

Grid and Tree grid are 19.3.57 version


JC Joseph Christ Nithin Issack Syncfusion Team October 31, 2022 04:34 AM UTC

Hi Fabio,

  For TreeGrid related queries, kindly followup the below forum.

  Forum: https://www.syncfusion.com/forums/178476/problem-with-internationalization

  If you have any queries related to EJ2 Grid, kindly get back to us.


Joseph I.

Live Chat Icon For mobile
Up arrow icon