Need help on setting up localization for datagrid

[Art Vandelay]

I am trying to localize the grid, having the correct decimal separator (,) for nb-culture, but following the documentation I can't get it to work.

I've added both cldr-data and nb-json.

 Grid

        <ejs-grid id="Grid" dataSource="@Model.Nutrients" allowPaging="true" allowSorting="true" allowFiltering="true" locale="nb">
            <e-grid-pagesettings pageSize="20"></e-grid-pagesettings>
            <e-grid-columns>
                <e-grid-column field="Name" headerText="Navn" width="400"></e-grid-column>
                <e-grid-column field="Maker" headerText="Produsent" width="300"></e-grid-column>
                <e-grid-column field="Kcal" headerText="Kcal" width="100" textAlign="Right"></e-grid-column>
                <e-grid-column field="Protein" headerText="Protein" width="100" textAlign="Right"></e-grid-column>
                <e-grid-column field="Carbohydrat" headerText="Karbohydrater" width="100" textAlign="Right"></e-grid-column>
                <e-grid-column field="Fat" headerText="Fett" width="100" textAlign="Right"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>


<script>
    document.addEventListener('DOMContentLoaded', function () {


        loadCultureFiles('nb');
        ej.base.setCulture('nb');
        ej.base.setCurrencyCode('NOK');




    });


    function loadCultureFiles(name) {


        var files = ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'];
        if (name === 'nb') {
            files.push('numberingSystems.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (name === 'nb' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../cldr-data/supplemental/' + files[prop], 'GET', false);
            }
            else {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../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>

[Aishwarya Rameshbabu]

Hi Art Vandelay,

Greetings from Syncfusion support.

Upon examining your inquiry, it has come to our attention that you are encountering difficulties with configuring localization in the Grid.

Based on the provided details, we have developed a sample that includes the nb-culture within the Grid.

For further insights, please refer to the code example, sample, screenshot, and documentation link provided below.

[Layout.cshtml]

 

    <script>

        var ajax = new ej.base.Ajax(location.origin + '/../../locale/nb.json', 'GET', false);   //load the nb json culture file

        ajax.send().then((e) => {

            var loader = JSON.parse(e);

            ej.base.L10n.load(

                loader

            );

            ej.base.setCulture('nb'); //Set the culture

        });

    </script>

 

[Index.cshtml]

<ejs-grid id="Grid" allowPaging='true' allowSorting='true' allowFiltering='true' dataSource="@ViewBag.DataSource" locale="nb" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <e-grid-columns>

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>        

        <e-grid-column field="Refertrack"  headerText="Refertrack" width="150"></e-grid-column>

   </e-grid-columns>

</ejs-grid>

<script>

    loadCultureFiles('nb'); // To load the culture files

    function loadCultureFiles(name) {

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

        var loader = ej.base.loadCldr;

        var loadCulture = function (prop) {

            var val, ajax;

            if (files[prop] === 'numberingSystems.json') {

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

            } else {

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

        }

    }

    // Setting the currency code

    ej.base.setCurrencyCode('NOK');

</script>

 

Sample: Please find in the attachment.

Screenshot:

Documentation Links:

Internationalization

Localization

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R                                                                                                                                                                            

Attachment: Localization_ed3228d2.zip

[Art Vandelay]

I've compared your sample with my code, and I can't find what's missing on my part.

Running your sample the localization works seems to work fine, but in my code the decimal are still shown with "." and not ",".

The other parts as "1 of 1 pages" is localized to "1 av 1 sider"

I've attached my sample as a zip.file.

Attachment: LocalizationTest_170818dd.zip

[Vasanthakumar K]

Hi Art Vandelay,

Query: In my code, decimals are still being shown with a dot (".") instead of a comma (",").

We’ve noticed that in your column definition for "Gram", you haven’t specified a format property. As a result, the grid is displaying the decimal values using the default format, which includes a dot (.) as the decimal separator.

To display decimal values with a comma (,) as the separator, you should define the column's format property as "C1". This will format the values as currency and adjust according to the culture’s formatting rules.

Additionally, we observed that you haven’t included the currencies.json file in your cldr-data static folder. For Syncfusion components to correctly display culture-based currency formatting, it is essential to include this file.

Please ensure that:

1. You define the format property for the column.
2. You include the currencies.json file in the cldr-data folder for proper currency and culture support.

For further details, please refer to the provided modified code example and working sample.

[code example]

<ejs-grid id="Grid" dataSource="@Model.Items" allowPaging="true" allowSorting="true" allowFiltering="true" locale="nb">

    <e-grid-pagesettings pageSize="20"></e-grid-pagesettings>

    <e-grid-columns>

        <e-grid-column field="Name" headerText="Navn" width="400"></e-grid-column>

        <e-grid-column field="Gram" headerText="Gram" width="100" textAlign="Right" format="C1"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

Modified sample: Please find the attachment.

Regards,

Vasanthakumar K

Attachment: 194632customerLocalizationsample_acfba2a4.zip

[Art Vandelay]

That was the missing piece of the puzzle. 

Thanks for outstanding help as always 👍

[Vasanthakumar K]

Hi Art Vandelay,

We are happy to hear that our provided solution is helpful in achieving your requirement on your application's end.

Please get back to us if you have any further queries related to this issue. As always, we will be happy to assist you.

Regards,

Vasanthakumar K