Localization/Globalization Grid (Javascript)

[Luis]

Hi,

I am trying to localize my Grid component to use "es-ES" but I can't find a way to do it (I have checked different articles, examples, your help/documentation area...), the format of the dates is fine (I can define the format) but for the numbers (using the "," as decimal separator and the "." as thousand separator is becoming impossible. Any help will be really appreciated. 

Regards,

Luis

[Sujith Kumar Rajkumar]

Hi Luis,

Greetings from Syncfusion support.

Based on the query we could understand that your requirement is to apply localization and globalization to the EJ2 Grid with the required culture – ‘es-ES’. This is explained in detail below,

Globalization:

This can be achieved using the Internalization library to load the files for the required culture which globalizes the number, date and time values in the Grid based on that culture.

For applying globalization you need to load the culture related files in your application. You can get these files by running the following npm command,

npm i cldr-data

Once installed load these files – ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'] from the required culture present inside the main folder and the ['numberingSystems.json''weekData.json'(For calendar rendered on Grid filtering)] file from the supplemental folder in your application using EJ2 base’s loadCldr method. Then the culture needs to be set for the EJ2 controls using the EJ2 base’s setCulture method and the currency can also be set(if required) using its setCurrencyCode method. This is demonstrated in the below code snippet,

declare var require: any

import { loadCldr, setCulture, setCurrencyCode} from '@syncfusion/ej2-base';

setCulture('es');

setCurrencyCode('EUR');

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

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

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

Locale API: https://ej2.syncfusion.com/documentation/api/grid/#locale

Localization:

You can localize the default text content of the Grid by loading the translation texts for the required culture from the “@syncfusion/ej2-locale” package by using the base’s L10n load function. This is demonstrated in the below code snippet,

declare var require: any

import { L10n } from '@syncfusion/ej2-base';

L10n.load(require('@syncfusion/ej2-locale/src/es.json'));

NPM package: https://www.npmjs.com/package/@syncfusion/ej2-locale

List of locale texts for supported cultures which can be loaded for the EJ2 controls can be checked in the below link,

Locale texts: https://github.com/syncfusion/ej2-locale/tree/master/src

More details on the globalization and localization for EJ2 Grid can be checked in the below help documentation links,

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

https://ej2.syncfusion.com/documentation/grid/global-local/#localization

Please get back to us if you require any further assistance.

Regards,

Sujith R