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
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Globalisation/Localisation

Globalisation/Localisation

Hi,
I'm struggling with these two (very related) topics in the schedule control. I'm attempting to set the culture and language settings globally per thread, using version 16.4.42.
There appear to be a few translations now on Github https://github.com/syncfusion/ej2-locale - these don't appear to be available via npm yet, so I've downloaded them locally for now (will they be available through npm at some point?)

I've been following all links mentioned in these related topics, and tried to find the api documentation for ej.base.loadCldr (which does not appear to be available):
https://www.syncfusion.com/forums/137047/setting-locale-does-not-work
https://www.syncfusion.com/forums/137904/how-to-globalize-and-localize-ej-2-components-using-plain-javascript-in-asp-net

In almost all instructions, the CLDR json files have to be loaded and parsed one by one through additional ajax threads. When loading the schedule, I already know where these files are located, why do we need Ajax to load them? Isn't there a possibility to simply "include" them similar to the javascript files?
Could we merge and minify the required files to save a few requests on the HTTP pipeline? https://www.npmjs.com/package/grunt-merge-json

It'd be great if you wouldn't mind to run me through the process. In my example, the cldr data is available in
wwwroot/lib/cldr-data/[e.g.]de/{ca-gregorian.json,numbers.json,...}

The locale files are in wwwroot/lib/syncfusion/locales; e.g. .../locales/de-DE.json

Initialisation would be done through the _Layout.cshtml (presently, I'll probably move this to a partial) just before the ScriptManager is initialised.

Thank you very much for your help. Globalisation and localisation seemed to be a lot simpler in JS1, and although this appears to be more flexible the documentation is somewhat limited on the topic.

7 Replies
JD Jayakumar Duraisamy Syncfusion Team January 4, 2019 04:17 AM

Hi Stefan, 
Please find the response below. 
S.No. 
Query 
Response 
1 
There appear to be a few translations now on Github https://github.com/syncfusion/ej2-locale - these don't appear to be available via npm yet, so I've downloaded them locally for now (will they be available through npm at some point?) 
Data in the github repository ej2-locale will be available as npm package in the next patch release on January 9, 2019. 
 
2 
I've been following all links mentioned in these related topics, and tried to find the api documentation for ej.base.loadCldr (which does not appear to be available): 
 
We have planned to improve the documentation, we will consider this and the same will be available in Essential JS 2 Volume 4 SP1. 
3 
In almost all instructions, the CLDR json files have to be loaded and parsed one by one through additional ajax threads. When loading the schedule, I already know where these files are located, why do we need Ajax to load them? Isn't there a possibility to simply "include" them similar to the javascript files? 
Could we merge and minify the required files to save a few requests on the HTTP pipeline? https://www.npmjs.com/package/grunt-merge-json 
 
It'd be great if you wouldn't mind to run me through the process. In my example, the cldr data is available in  
wwwroot/lib/cldr-data/[e.g.]de/{ca-gregorian.json,numbers.json,...} 
 
The locale files are in wwwroot/lib/syncfusion/locales; e.g. .../locales/de-DE.json 
 
Initialisation would be done through the _Layout.cshtml (presently, I'll probably move this to a partial) just before the ScriptManager is initialised 
 
You can also load cldr data in the js file and load them using the loadCldr function after loading the Essential JS 2 global script file (ej2.min.js). 
 
We have created a stackblitz sample. Please refer that for further details. 
 
Please find the cldr-data for de culture in javascript format ready to be used in the below link. 
 
Please let us know, if you need any other assistance. 
Regards, 
Jayakumar D 


ST Stefan January 4, 2019 05:21 AM

Dear Jayacumar,
the news about the improved documentation and npm packages are very exciting, that will certainly make things easier.
I have now tried your approach, but am still getting stuck. The moment I set the base culture, the schedule control appears partly translated but is unable to work.

When relying on the base culture, without explicitly setting the schedule's culture, my actionFailure message is triggered twice (different stacktraces):
​and
​The navigation popup calendar appears in German (with the word "Januar", but the header still says "January" or Today, Timeline Day etc instead of their German equivalents.
I've used gulp-merge-json to combine the required files:
gulp.task("CopySyncfusion",
    function() {
        gulp.src([folders.cldr + "de/" + 'ca-gregorian.json', folders.cldr + "de/" + 'numbers.json', folders.cldr + "de/" + 'timeZoneNames.json', folders.cldr + "de/" +'currencies.json'])
            .pipe(mergejson({fileName: 'de.json'}))
            .pipe(gulp.dest(folders.root + "lib/cldr-data/de"));
...
The _Layout file has this script just before <ejs-scripts>:
 <script type="text/javascript" asp-add-nonce="true">           
            document.addEventListener('DOMContentLoaded', function () {                
                let cldrPath = location.origin+"/lib/cldr-data/de/";
                $.getJSON(cldrPath + "de.json", function (json) { ej.base.loadCldr(json); });               
                // load language files
                $.getJSON("/lib/syncfusion-locale/de-DE.json", function (json) { ej.base.L10n.load(json); });               
                ej.base.setCurrencyCode("EUR");
                ej.base.setCulture("de");               
            });           
        </script>

Any guidance towards troubleshooting this that you could give me would be appreciated.

JD Jayakumar Duraisamy Syncfusion Team January 4, 2019 07:01 AM

Hi Stefan, 
We have analyzed the reported error but we unable to replicate it. If it is possible, please share any demo sample which can we able to replicate the reported issue. It will be helpful for us to provide exact solution. 
Regards, 
Jayakumar D 


ST Stefan January 8, 2019 06:08 PM

I think I can see where the issue is now.
The Scheduler begins to load before the required language files are loaded.
https://stackblitz.com/edit/js-1h2ahy

So in my file, the script loading the language files is earlier than the EJ Script manager, but the Scheduler is still quicker than the ej.base calls:

 <script type="text/javascript" asp-add-nonce="true">
        document.addEventListener('DOMContentLoaded', function () {
            let cldrPath = location.origin+"/lib/cldr-data/de/";
            $.getJSON(
                cldrPath + "de.json", function(json, textStatus,jqXHR) {                   
                    ej.base.loadCldr(json);
                });
            // load language files
            $.getJSON("/lib/syncfusion-locale/de-DE.json", function(json, textStatus,jqXHR) {              
                ej.base.L10n.load(json);               
            });            
            ej.base.setCurrencyCode("EUR");
            ej.base.setCulture("de");
        });
        </script>

Later in the file, EJ script manager is loaded from the _Layout.cshtml:
<ejs-scripts asp-add-nonce="true"></ejs-scripts>

How can I delay <ejs-scripts> to run _after_ loading the language files?



ST Stefan January 8, 2019 07:07 PM

I have managed to do this now, but it's been a rather complex process. I'll detail my steps below in case this helps someone else at some point.

In order to reduce the number of HTTP requests, I have used gulp-merge-json to combine all files into only 2 (one for CLDR, the other one for the translations); see below for the gulp-task.

I then wait for the files to load through JSON, then call setCulture/setCurrencyCode and raise a custom event. I have overridden EJ Script manager to wait for that custom event.
_Layout.cshtml
(not sure how to do code highlighting here, so here goes plain-text)

<script type="text/javascript" asp-add-nonce="true">
            // TODO: currently hardcoded for de, will need to be changed per context's culture
            document.addEventListener('DOMContentLoaded', function() {
                let cldrPath = location.origin + "/lib/cldr-data/de/";
                $.when(
                    $.getJSON(
                        cldrPath + "de.json", function(json, textStatus, jqXHR) {
                            //console.log(jqXHR.responseText);
                            ej.base.loadCldr(json);
                            console.log("Loaded CLDR");
                        }),
                    // load language files
                    $.getJSON("/lib/syncfusion-locale/de-DE.json",
                        function(json, textStatus, jqXHR) {

                            //console.log(jqXHR.responseText);
                            ej.base.L10n.load(json);
                            console.log("Loaded L10N");
                        })
                ).then(function() {
                    ej.base.setCulture("de");
                    ej.base.setCurrencyCode("EUR");
                    // dispatch the "LanguageFilesLoaded" event that Syncfusion Scriptmanager is waiting for
                    let languageFilesLoadedEvent = new CustomEvent("LanguageFilesLoaded", { bubbles: true });
                    document.dispatchEvent(languageFilesLoadedEvent);
                    console.log("dispatched LanguageFilesLoaded");
                });
        });
        </script>

The EJS Script manager is overriden as such: (ignore the nonce here, important is output.PreContent/.PostContent)

    [HtmlTargetElement("ejs-scripts", Attributes = "asp-add-nonce")]
    public class EjsScriptsTagHelper : TagHelper
    {
        private readonly ICspNonceService _nonceService;
        [HtmlAttributeName("asp-add-nonce")]
        public bool AddNonce { get; set; }

        public EjsScriptsTagHelper(ICspNonceService nonceService) : base()
        {
            _nonceService = nonceService;           
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {           
            if (AddNonce)
            {
                // The nonce service is created per request, so we
                // get the same nonce here as the CSP header
                output.Attributes.Add("nonce", _nonceService.GetNonce());
            }
            output.PreContent.AppendHtml(@"document.addEventListener('LanguageFilesLoaded', function () { console.log('LanguageFilesLoaded received'); ");
            output.PostContent.AppendHtml(@"});");
            base.Process(context, output);
        }
    }

Now, it all works fine, although not everything appears to be translated. Dates and Times are good, but the dialogs still have "Add Title", "Description" etc instead of their non-english equivalents. Well, better than nothing.

ST Stefan replied to Stefan Kunstmann January 8, 2019 07:17 PM

Now, it all works fine, although not everything appears to be translated. Dates and Times are good, but the dialogs still have "Add Title", "Description" etc instead of their non-english equivalents. Well, better than nothing.

Followup on that translation issue:
The locale files provided by Syncfusion https://github.com/syncfusion/ej2-locale initialise "de-DE". They will have to be changed to plain "de" for the translations to work.
@Syncfusion Team: Could you elaborate why that is?

"de-DE": {
"chart": {
"Zoom": "Zoomen",
"ZoomIn": "Hineinzoomen",
"ZoomOut": "Rauszoomen",
"Reset": "Zurücksetzen",

JD Jayakumar Duraisamy Syncfusion Team January 9, 2019 04:55 AM

Hi Stefan, 
 
Sorry for the inconvenience caused, naming conflict issue was resolved and published locale data in github and npmjs. Here after culture code will be maintained as per the CLDR standard. (for example, de and not as de-DE). 
We can also load the culture data and localization data directly in the scripts immediately after loading Essential JS 2 scripts as shown in below screenshot, 
 
 
 
For, your convenience, we have created a custom sample by loading the culture and localization data directly in the script. 
As promised, we have published the ej2-locale data as a separate npm package. 
 
Please let us know, if you need any other assistance on this. 
 
Regards, 
Jayakumar D 


Loader.
Live Chat Icon For mobile
Up arrow icon