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

Jose Luis Garcia

Asked On December 27, 2018 04:03 PM UTC

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

Reply | Reply with quote

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

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

Reply | Reply with quote

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

Jose

Attachment: dashboard_7bdb2e74.zip

Reply | Reply with quote

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.

[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

Reply | Reply with quote

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

Jose

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On January 3, 2019 09:54 AM UTC

Hi Jose,

We are glad that your requirement has been achieved.

Regards,

Madhu

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
141689	Dec 27,2018 04:03 PM UTC	Jan 3,2019 09:54 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US