Trouble with localization of number format

[Alexandre]

Hello,

I am trying to use in a number column of a DataGrid control a format like "345.456,90", but none of the alternatives I found in the forum have helped me achive that.

The grid should be getting the localized information to display the correct format, but it does not work the way it should.

I have followed the instructions found on the forum and added the script resources below:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="~/js/ej2/ej2.min.js"></script>
<script src="~/js/ej2/ej.web.all.min.js"></script>
<script src="~/js/ej2/ej.culture.pt-BR.js"></script>
<script src="~/js/ej2/ej.localetexts.pt-BR.js"></script>

The grid I am using comes from a sample given on another forum thread, and this is the configuration:

<ejs-grid id="cruiseLinesGrid" [email protected] allowPaging="true" toolbar="@(new List<string>() { "Edit", "Update", "Cancel" })" Locale="pt-BR">
        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="true"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="20"></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125" allowEditing="false"></e-grid-column>
            <e-grid-column field="OrderID" headerText="OrderID" width="120" allowEditing="false"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="CustomerID" width="170" allowEditing="false"></e-grid-column>
            <e-grid-column field="OrderDate" headerText="OrderDate" format='dd/MM/yyyy' textAlign="Center" width="135" allowEditing="false"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" width="120" format="N2"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
​

Neither the buttons on the grid nor the number format are respecting the localization settings:

Is there anything I am missing?

Regards,

A

[Rajapandiyan Settu]

Hi Alexandre, 

Thanks for contacting Syncfusion support. 

Based on the query we would like to let you know that the Grid is globalized for different culture by loading the corresponding culture files from the cldr-data common repository. And the ‘pt-BR’ directory was not available in the cldr repository present in GitHub. Please check the below common repository for the available culture files, 

https://github.com/unicode-org/cldr/tree/master/common/main 

So we have explained the steps for achieving this requirement below with the ‘pt’ 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 ‘pt’ folder) and the 'numberingSystems.json' file from the supplemental folder to your application. Then use the following code to load these files in the application on DOM  content load, 

<script> 

 

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

        loadCultureFiles('pt'); 

        // The global culture required is loaded in the base 

        ej.base.setCulture('pt'); 

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

        ej.base.setCurrencyCode('EUR'); 

    }); 

 

    function loadCultureFiles(name) { 

        // Required culture files 

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

        if (name === 'pt') { 

            files.push('numberingSystems.json'); 

        } 

        var loader = ej.base.loadCldr; 

        var loadCulture = function (prop) {      

            var val, ajax; 

            // Culture files are loaded into the project  

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

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

            } 

            else { 

                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> 

You can also localize the default text content of the Grid to ‘pt’ 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({ 

            'pt': { 

                "grid": { 

                     "EmptyRecord": "Não há registros a serem exibidos", 

                     "True": "verdade", 

                                  . 

                                  . 

                 }, 

                "pager": { 

                   "currentPageInfo": "{0} de {1} páginas", 

                   "totalItemsInfo": "({0} itens)", 

                                 . 

                                 . 

                } 

            } 

        }); 

}); 

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridGlobalization-782483247_(1)1471295170.zip 

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/aspnetcore/documentation/grid/global-local/#internationalization 

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

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

Regards, 

Rajapandiyan S 

[Alexandre]

Hello Rajapandiyan,

Thank you for that detailed response to my question. The sample provided is exactly what I needed. I would not have found that solution alone.

But I am still facing one issue. When trying to copy the code from your sample to my project, I got the following error in the Console:

Uncaught TypeError: Cannot read properties of undefined (reading 'loadCldr')
    at loadCultureFiles (Upsert:1795)
    at HTMLDocument.<anonymous> (Upsert:1679)

All the dependency files listed on your answer have been inserted in the project. What could be causing this error?

Regards,

Alexandre

[Rajapandiyan Settu]

Hi Alexandre, 

Thanks for your update. 

By analyzing your query, we suspect that “ej.base.loadCldr” might not be referred properly in your project. kindly ensure the below cases from your end. 

1. Did you referred the Syncfusion script in your project?

    @* Syncfusion Essential JS 2 Scripts *@ 

    <script src=https://cdn.syncfusion.com/ej2/dist/ej2.min.js></script> 

2. Did you load the culture files in DOMContentLoaded event?

<script> 

 

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

        loadCultureFiles('pt'); 

        --- 

    }); 

 

    function loadCultureFiles(name) { 

        --- 

        var loader = ej.base.loadCldr; 

        ---- 

    } 

</script> 

3. Are you getting the ej.base.loadCldr instances in the DOMContentLoaded event?

 

Still, if you face same issue, kindly share the below details to replicate it at our end. 

1. Share the issue reproducible sample which will be very helpful to resolve the issue at earlier.
2. Share the replication procedure.
3. EJ2 Grid script version.
4. Are you using both EJ1 and EJ2 controls in the same project?

Regards, 

Rajapandiyan S 

[Alexandre]

Hello Rajapandiyan,

The problem was with the ej2.min.js file. Once I replaced my local file with the CDN you provided, everything worked just fine.

Thank you very much for the assistance.

Regards,

Ale

[Rajapandiyan Settu]

Hi Alexandre, 

We are glad that you have resolved the reported problem. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S