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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





141689 Dec 27,2018 04:03 PM UTC Jan 3,2019 09:54 AM UTC Angular - EJ 2 5
Tags: Grid
Jose Luis Garcia
Asked On December 27, 2018 04:03 PM UTC


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.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  

Jose Luis Garcia
Replied On 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

Madhu Sudhanan P [Syncfusion]
Replied On 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 

Jose Luis Garcia
Replied On 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!!

Madhu Sudhanan P [Syncfusion]
Replied On January 3, 2019 09:54 AM UTC

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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