Display and Export Amounts in European Format

[CR]

Dear All,

I have a grid view displaying several amounts. So far, I guess I must have set the correct language (locale), since the values are displayed with a € in front of the amount. However, the delimiter for the decimal part is still in US format, meaning that the value is displayed as € 1,000.25. Using the correct locale should however render this as € 1.000,25. Moreover, when exporting the grid as an Excel file, values are exported in the default US setting with a $ in front. 

With regards to formatting currencies, I already to a look at the following post. The question was aimed at a NetCore application. I could not apply the solution given in the post since I am using MVC. 

1. Could somebody provide an example about how to display values in € properly?

2. Could somebody provide an explanation why the default values are exported when using the grid's excel export capability? What needs to be done to export the € values?

Thanks a mil in advance 

Kind reagards 

Chris

I've attached the javascript section taken from the view in which the grid is implemented.

Attachment: view_sample_683b34f7.zip

[Pavithra Subramaniyam]

Hi Chris, 

 

Thanks for contacting Syncfusion support. 

 

Query#1: Could somebody provide an example about how to display values in € properly? 

 

From your query we suspect that you have missed to load the Culture CLDR files in your application. If yes please load the required json files as given below. Please refer to the below code example, documentation link and sample link for more information. 

 

[index.cshtml] 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultAggregate").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    .  .  .  .  .  . 

 

}).AllowPaging().PageSettings(page=> { page.PageCount(5); }).Render() 

</div> 

 

<script> 

 

    document.addEventListener('DOMContentLoaded', function () { 

         

        loadCultureFiles('de'); 

        ej.base.setCulture('de-DE'); 

      ej.base.setCurrencyCode('EUR'); 

 

 

    }); 

 

    function loadCultureFiles(name) { 

 

        var files = ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json']; 

        if (name === 'de') { 

            files.push('numberingSystems.json'); 

        } 

        var loader = ej.base.loadCldr; 

        var loadCulture = function (prop) {      

            var val, ajax; 

            if (name === 'de' && prop === files.length - 1) { 

                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/supplemental/' + files[prop], 'GET', false); 

            } 

            else { 

                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

            } 

            ajax.onSuccess = function (value) { 

                val = value; 

                loader(JSON.parse(val)); 

           }; 

            ajax.send(); 

 

        }; 

        for (var prop = 0; prop < files.length; prop++) { 

            loadCulture(prop); 

        } 

    } 

</script> 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/calendar/globalization/ 

 

Sample               : https://www.syncfusion.com/downloads/support/directtrac/253147/ze/supplemental549098544.zip 

 

Query#2:  Could somebody provide an explanation why the default values are exported when using the grid's excel export capability? What needs to be done to export the € values? 

 

We suspect that you are using an old version of Syncfusion package. We have already fixed the reported behavior in our version v17.2.35. So we suggest you to upgrade the Syncfusion packages to overcome the reported issue. 

 

https://ej2.syncfusion.com/javascript/documentation/release-notes/17.2.35/#grid 

 

please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[CR]

Dear Pavithra S.

Thank you very much for your reply and your suggestions. 

Unfortunately, I could not download the sample you kindly prepared (access was denied). 

As suggested, I installed the recent updates and also upgraded the packages using package manager. At first glance, my second query has been answered: The export now shows the correct currency and decimal delimiter.

With regards to the values displayed in the grid on the web page, the delimiter still remains a '.' instead of a ',' and so far I've been unable to identify the error. I've attached the recent version of the page in question. I would be delighted if you could assist me regarding this matter.

Thanks a mil in advance for your support. 

Attachment: page_68e8b0a8.zip

[Pavithra Subramaniyam]

Hi Chris, 

Sorry for the inconvenience. 

The culture in the base must also be set as ‘de’ for loading the European format as given in below code snippet, 

document.addEventListener('DOMContentLoaded', function () { 

      loadCultureFiles('de'); 

      ej.base.setCulture('de'); 

      ej.base.setCurrencyCode('EUR'); 

}); 

Additional information: 

Also on setting the locale property of the grid to ‘de’, you can load the translations for the culture by using the load function of the L10n class as demonstrated below, 

ej.base.L10n.load({ 

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

                } 

            } 

}); 

We have prepared a new sample based on this for your reference. You can find it below, 

Sample: https://www.syncfusion.com/downloads/support/forum/149809/ze/GridApplication1399775355  

 

Please check if you are able to download this sample and let us know if you are facing any issues. 

  

Regards,  

Pavithra S.  

[CR]

Dear Pavithra,

Thank you very much for your detailed example. I was able to download and take a look at the sample project. The € values are now displayed correctly. 

Also thank you for pointing out that localisation strings may be added if required. 

I have two follow-up questions related to the solution you provided:

1. How would I change the language variants for a language? For example, if the application should feature Swiss German, would I use ej.base.setCulture('de-CH'), considering that fact that the cldr-data folder contains such subfolders.

2. You pointed towards loading the ej.base.L10n file. Where is this file located? I am just asking because it would be a huge benefit if this file could be localised once and extended if required across all applications by using a central location. Would it be possible to have one central localisation file per language and access this particular file from any application? What would the code for calling this file look like? 

Thanks a mil again for your assistance resolving the € values in the grid. Please do get back in touch should you require more information regarding my follow-up questions.

Kind regards

Chris

[Pavithra Subramaniyam]

Hi Chris, 

 

Query: How would I change the language variants for a language? For example, if the application should feature Swiss German, would I use ej.base.setCulture('de-CH'), considering that fact that the cldr-data folder contains such subfolders. 

 

You can set different language for your page by using ej.base.setCulture method. You need to include those needed language cldr files in that folder(cldr-data).  

 

For Internationalization, you need to include cldr files into your application. You need to download cldr-data globally in any location by using below command. 

 

Command: 

npm install cldr-data 

 

After installing cldr-data, you can find cldr-data for all locale in this location(node_modules->cldr-data->main). You need to copy the required(or all) locale cldr-data and paste into your application folder(Scripts->cldr->main->paste copied cldr files). You need to include cldr-data into your application and refer file location in index.cshtml file like previously provided sample. 

 

Query: You pointed towards loading the ej.base.L10n file. Where is this file located? 

 

The file(ej.base.L10n) which you pointed is handled in our source. You need to use this method(ej.base.L10n.load) for loading Localization translations. 

 

Query: Would it be possible to have one central localisation file per language and access this particular file from any application?  

 

Yes, it is possible to have one file that translate all the localization translations. To load translation object in Essential JS 2 components, you can load locale object in L10.load function from ej.base. For example, In the below code snippet we have loaded the locale file for German culture. 

 

ej.base.setCulture('de-DE'); 

var ajax = new ej.base.Ajax('/src/de-DE.json', 'GET', true); 

ajax.onSuccess = function (value) { 

        //Assigning locale text value for Essential JS 2 components 

        ej.base.L10n.load(value); 

    }; 

ajax.send(); 

 

https://github.com/syncfusion/ej2-locale 

Please get back to us if you need further assistance. 

Regards,   

Pavithra S