Grid currency format localization

[Eddie Willcox]

Hi,

On my grid, I have a column that displays a product price. I have add the .Format("C2") property for the column and it does show the value as a currency value, but I need it to be localized as en-ZA and not en-US. How do I go about changing the locale for my grid?

[Rajapandiyan Settu]

Hi Eddie, 

Greetings from Syncfusion support. 

You can achieve your requirement by using the Internalization library to load the files for the ‘en-ZA’ 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 copy these files – ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'] from the required culture present inside the main folder(In your case ‘en-ZA’ folder), Then use the following code to load these files in the application, 

<script> 

 

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

        loadCultureFiles('en-ZA'); 

        // The global culture required is loaded in the base 

        ej.base.setCulture('en-ZA'); 

        // The global Currency code required for the culture is set 

        ej.base.setCurrencyCode('ZAR'); 

    }); 

 

    function loadCultureFiles(name) { 

        // Required culture files 

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

        if (name === 'fr') { 

            files.push('numberingSystems.json'); 

        } 

        var loader = ej.base.loadCldr; 

        var loadCulture = function (prop) {      

            var val, ajax; 

            // Culture files are loaded into the project  

                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/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> 

We have prepared a sample based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridWithGlobalization-16391169.zip 

You can also localize the default text content of the Grid to ‘en-ZA’ culture by loading the translation texts for that culture using the base’s L10n load function. This is demonstrated in the below code snippet, 

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

         

        // Localized text for the grid and pager are loaded 

        ej.base.L10n.load({ 

            'en-ZA': { 

                "grid": { 

                    "EmptyRecord": "Aucun enregistrement à afficher", 

                    "True": "vrai", 

                                  . 

                                  . 

                 }, 

                "pager": { 

                            . 

                            . 

                } 

            } 

        }); 

}); 

List of locale texts for different 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   

These local texts can also accessed by installing the following npm package, 

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

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

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

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

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

Regards, 

Rajapandiyan S 

[Eddie Willcox]

Perfect!. It worked exactly as I wanted. Thank you so much.

[Thiyagu Subramani]

Hi Eddie, 

Thanks for the update. 

We are happy to hear that the provided solution works at your end.  

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S