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

How to globalize and localize EJ 2 components (using plain javascript, in ASP.NET)

Hi,

How should I globalize and localize EJ 2 components using javascript in an ASP.NET web site? 
Actually a DNN (dotnetnuke) web site, which is still webforms...  Not ASP.NET Core, nor ASP.NET MVC, but perhaps as an example I can figure out what to do if I see an ASP.NET MVC example.

I don't know the user's language (culture) configuration in advance. I can know it at run-time (en-US, es-AR, en-GB, etc.).

Question 1:
I'm trying to set thestandard date formats, numbers formatting and currency symbols for a given culture across all EJ 2 components.
Is this (code in your example) what I need to do?
loadCldr(
require('cldr-data/main/ar/numbers.json'),
require('cldr-data/main/ar/ca-gregorian.json'),
require('cldr-data/main/ar/numbers.json'),
require('cldr-data/supplemental/numberingSystems.json'),
require('cldr-data/main/ar/timeZoneNames.json')
);

setCulture('de');
setCurrencyCode('EUR');

I'm not using Node.js (cannot use 'require', etc., right?). I'm using plain JavaScript embed in a ASP.NET web page. Which is the right way to do this in my situation?


Question 2:
Isn't "setCulture()" enough? Should I also set explicitly a currency code?
Standard date formats, numbers formatting and currency symbols depends on the defined culture, right?. Why should I say explicitly 'EUR' if I've setCulture('fr-FR'), which implies EUR currency ?


Question 3:
Should I explicitly include the 'locale:' in every component or can this be set globally? I thought "setCulture()" would have set this globally, but I see in your examples you explicitly define the 'locale' e.g. when configuring a grid, even after setting the global "setCulture('de');"
For example, should I explicitly add this to a grid?
var grid = new ej.grids.Grid({
locale: 'es-UY', // Note: 'es-UY' was set after defining the grid when issuing setCulture('es-UY');
....
....


Question 4:
The CLDR data (once I understand how to properly load it and reference it) will solve the globalization issues, right?. What's about the localization?
How can / should I reference and load pre-built localized files for EJ 2 components?
"The Localization library allows you to localize default text content of the Grid. The grid component has static text on some features"
"The Internationalization library is used to globalize number, date, and time values in grid component using format strings in the columns.format".
I see this example on the documentation page:
ej.base.L10n.load({
    'de-DE': {
        'grid': {
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
            'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
            'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
            'Item': 'Artikel',
            'Items': 'Artikel'
        },
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'totalItemsInfo': '({0} Beiträge)',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPagerTooltip': 'Zum vorherigen Pager'
        }
    }
});
So, I should callej.base.L10n.load(), explicitly passing all the localized texts which I should created by hand?
Are there pre-built translations available? How can/should I load them?
After calling "ej.base.L10n.load(prebuit-language-file-definition-reference?)" and "ej.???????.setCulture('de');", should I have to set "locale: 'de-DE'" explicitly in a grid?
At \16.1.0.37\Web (Essential JS 2)\JavaScript\dist I see a "locale-string.js" file. What is it and how should I use it?

Thanks,
Horacio

References:

8 Replies

HO horacioj June 5, 2018 01:06 PM UTC

cannot be done?


VA Venkatesh Ayothi Raman Syncfusion Team June 5, 2018 01:37 PM UTC

Hi Horaico, 

Thanks for the update. 


Query #1:” I'm trying to set thestandard date formats, numbers formatting and currency symbols for a given culture across all EJ 2 components. 
You can use the below code snippet to set the culture and currency code globally for all Essential JS 2 components in plain JavaScript.  
 
//set culture globally  
ej.base.setCulture(‘de’)  
// set currency code globally  
ej.base.setCurrencyCode(‘EUR’);  
  
Query #2:” Isn't "setCulture()" enough? Should I also set explicitly a currency code? 
Yes, we should define both corresponding culture and currency code in setCulture and setCurrencyCode method for define the globalization and localization.  
 
Query #3:” Should I explicitly include the 'locale:' in every component or can this be set globally? I thought "setCulture()" would have set this globally, 
If you are setting the setCulture globally then don’t need to specify in every component. So, we suggest you to set culture in either component or globally. 

Query #4:” How can / should I reference and load pre-built localized files for EJ 2 components? 
Currently we don’t have support for loading locale objects from localization file in Essential JS 2. We have considered this as a feature request and it will be included Essential Studio Volume 2, 2018 Sp1 release. 
 
Regards, 
Venkatesh Ayothiraman. 



HO horacioj June 7, 2018 06:59 PM UTC

Hello,

This isn't working for me:
ej.base.setCulture('es-ES');
or
ej.base.setCulture('es-UY');

a gird's column is defined like this:
 { field: 'CreatedOnDate', headerText: 'Created', format: { type: 'date', skeleton: 'medium' }, width: 100 }

No matter which ej.base.setCulture(..) I try, the date is always displayed as "Jun 6, 2018"
If it were working, the date should have been displayed as "6 Jun 2018" when setting es-ES or es-UY

I think for this to work I have to somehow reference / load first cldr-data file(s)? all of them? or is "ca-gregorian.json" enough for date formats?
How should I do this (load the files)? Because I cannot use "require()"
Is there any way in EJ2 to build and reference something similar to the EJ1's ej.culture.es-ES.js, ej.culture.en-US.js, ej.culture.fr-FR.js, etc. files?

Thanks






VA Venkatesh Ayothi Raman Syncfusion Team June 8, 2018 02:03 PM UTC

Hi Horaico, 

Thanks for the update. 

Query #1:’ How should I do this (load the files)? Because I cannot use "require()" 
We can load the cldr-data json file using AJAX request  for pure javascript like as follows, 

 
[load CLDR json file] 
 
function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json', 'currencies.json']; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            ej.base.loadCldr(JSON.parse(val)); 
            ej.base.setCulture('es-UY'); //set culture file globally 
            ej.base.setCurrencyCode('EUR'); //set currency code globally 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
    document.addEventListener('DOMContentLoaded', function () { 
        loadCultureFiles('es-UY'); 
    }); 

We have also prepared a sample for your convenience which can be download from following link, 


Query #2:” Is there any way in EJ2 to build and reference something similar to the EJ1's ej.culture.es-ES.js, ej.culture.en-US.js, ej.culture.fr-FR.js, etc. files? 
 
We have implemented the internationalization libraryUnicode CLDR JSON data which will be available on Json format only in cldr-data packages, so currently we do not have support for loading cldr files in JavaScript format as used in the Essential JS 1. We suggest you to access the json files using ajax post and load it in your application. 
 
Note: In that sample, we have copied the CLDR-files in scripts folder. Please refer to the scripts folder. 

Regards, 
Venkatesh Ayothiraman 



HO horacioj June 17, 2018 10:57 PM UTC

Thanks, it is working now!

PS: I couldn't find 'es-ES' and 'en-US' cldr-data files. I assume they are 'es' and 'en' respectively. Am I right? 


VA Venkatesh Ayothi Raman Syncfusion Team June 18, 2018 07:12 AM UTC

Hi Horaico, 


Thanks for the update. 

We are very happy to hear that your requirement is achieved, and you can use the ‘es’ globalization files instead of ‘es-ES’ and use ‘en’ globalization files instead of ‘en-US’.   

Regards, 
Venkatesh Ayothiraman. 




LH Lon Hofman April 30, 2020 10:35 AM UTC

Hello, 

Just wondering how this is now (2020): Do I need to translate all the ej2 component v18 display texts still for all languages I want to support or are there localized files available? (for component display text, not just currency/numbers/date/etc formats)

Kind regards.


RS Rajapandiyan Settu Syncfusion Team May 1, 2020 10:35 AM UTC

 
Thanks for your update. 
 
Query : Do I need to translate all the ej2 component v18 display texts still for all languages I want to support or are there localized files available? (for component display text, not just currency/numbers/date/etc formats) 
 
From your query we could suspect that you need a localization file for default text in all the EJ2 controls. Please refer the below github here you can get all the available ej2 locale with default text in ej2 controls. 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rajapandiyan S 


Loader.
Live Chat Icon For mobile
Up arrow icon