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

[Jose Luis Garcia]

Hello,

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);

setCulture('es');

setCurrencyCode('EUR');

But this is the result: €3,550.00

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

No errors appear.

Regards

Jose

[Thavasianand Sankaranarayanan]

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-columns> 

            <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> 

        </e-columns> 

    </ejs-grid> 

</div> 

 

Sample: https://stackblitz.com/edit/angular-wtifyf-pfxw4c?file=default.component.ts  

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. 

Regards, 

Thavasianand S.  

[Jose Luis Garcia]

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

Jose

Attachment: dashboard_7bdb2e74.zip

[Madhu Sudhanan P]

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.  

 

[json-typings.d.ts] 

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'; 

 

L10n.load({ 

  '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)', 

      ... 

   } 

  } 

}); 

 

@Component({ 

  selector: 'app-root', 

  template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' [allowPaging]='true'> 

                ... 

               </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

  title = 'LocaleSamplenew'; 

  public data: Object[]; 

 

  ngOnInit(): void { 

    setCulture('es'); 

    setCurrencyCode('EUR'); 

 

    loadCldr(require('cldr-data/main/es/currencies.json'),                 //loading culture files for number formats. 

      require('cldr-data/main/es/numbers.json'), 

      require('cldr-data/main/es/ca-gregorian.json'), 

      require('cldr-data/main/es/timeZoneNames.json'), 

      require('cldr-data/supplemental/numberingSystems.json')); 

 

      this.data = data; 

  } 

} 

 

Please find the below sample for your reference. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/angularLocaleSample-536454836  

Please get back to us if you need further assistance. 

 

Regards, 

Madhu Sudhanan P 

[Jose Luis Garcia]

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!!

Jose

[Madhu Sudhanan P]

Hi Jose, 

We are glad that your requirement has been achieved. 

Regards, 

Madhu