1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Language in the grid editor is not set correctly, e.g. for DatePicker.

Language in the grid editor is not set correctly, e.g. for DatePicker.

I have these field and edit definitions for the grid.

One field is a datepicker field.

If I create the definition within the grid with tags, the language transfer to the datepicker works. (Images 1 + 2). Language is set.

 If I create the definition in the code and then assign it to the grid, it does not work. (Pictures 3 + 4) Language is not set.


What could be the reason?

Thank you very much for your feedback.

WORKS

SS1.png

ss2.png



DOES NOT WORK

ss3.png


ss4.png



6 Replies
RR Rajapandi Ravi Syncfusion Team February 7, 2024 12:14 PM UTC

Hi Reto,


Greetings from Syncfusion support


To apply localizing the Grid, 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


In ASP.NET Core, the static file contents should present under wwwroot folder. For this, manually copy the CLDR-Data from the node_modules folder and place inside the wwwroot folder and refer from the \wwwroot\scripts\cldr-data location.


Once installed you can refer the following file ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json', 'weekData.json'] from the required culture present inside the main folder and the 'numberingSystems.json' file from the supplemental folder to your application folder.


Based on your query we have prepared a sample and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below code example and sample for more information.


 

@{

 

    var DateParams = new Syncfusion.EJ2.Calendars.DatePicker()

    {

        Locale = "de",

        Format = "dd.MM.y",

        AllowEdit = false,

        ShowClearButton = false

    };

 

    var Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", IsPrimaryKey=true, Width="120", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="EmployeeID", HeaderText="Employee ID", Width="150" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Format="C2", Width="170" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="150" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="Order Date", EditType="datepickeredit", Edit= new {@params = DateParams }, Type="date", Format="dd.MM.y", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Width="150" }

};

}

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" columns="Columns" allowGrouping="true" allowPaging="true" locale="ar">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>

 

</ejs-grid>

 

<script>

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

 

// Method for loading culture files in the application in invoked

        loadCultureFiles('de');

        // Culture and currency code is set

        ej.base.setCulture('de');

        ej.base.setCurrencyCode('EUR');

 

// Localized text for the grid and pager are loaded

        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': 'Gehen Sie zu den nächsten Pager-Elementen',

                    'previousPagerTooltip': 'Gehen Sie zu vorherigen Pager-Elementen'

                },

                'datepicker': {

                    'placeholder': 'Wählen Sie ein Datum',

                    'today': 'heute'

                }

            }

        });

    });

 

 

// Method for loading the culture files in the application

    function loadCultureFiles(name) {

// Required files which are moved inside a folder within the application

        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;

// The culture files are loaded from its path present within the application

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

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

            }

            else {

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

 


Sample:


Screenshot:



If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample.


Attachment: 186505sample_684a26e8.zip

RR Reto Ruemmeli February 7, 2024 01:02 PM UTC

Hi Rajapandi 


Thank you for your answer.

All JS files for the localization were already loaded and work correctly so far. It is only the problem in the column definition when the definition takes place in the code and not as a tag.

But I have found the error based on your example.


Javascript

> ej.base.setCulture('de-CH');

this initialization was not set. i was not aware of this.


Thanks again


best regards, Reto



RR Reto Ruemmeli replied to Reto Ruemmeli February 7, 2024 03:26 PM UTC

Hi Rajapandi

the joy was a little too early.

I have now used your example and ported it to .net Core 6. 
I have attached the changed version so that you can test it. 

The display is now correct, but the transfer of parameters does not work. 
I have changed these parameters

Image_1051_1707319160953

but the calendar still shows SO (Sunday) as the first day and the ClearButton does show when a date is entered.

Image_3892_1707319216235


Thank you very much for your help.
Best regards, Reto


Attachment: Upload_d31ae153.rar

RR Rajapandi Ravi Syncfusion Team February 8, 2024 07:34 AM UTC

Reto,


We have checked your shared application and we could see that the definition for edit params is nor properly set. Since you are using .net 6 you have to define the params like the below format to achieve your requirement. Please refer the below code example and sample for more information.


 

@{

    var DateParams = new Syncfusion.EJ2.Calendars.DatePicker()

            {

                Locale = "de-CH",

                FirstDayOfWeek = 4,

                Format = "dd.MM.y",

                AllowEdit = false,

                ShowClearButton = false

            };

 

 

    var Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", IsPrimaryKey=true, Width="120", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="EmployeeID", HeaderText="Employee ID", Width="150" },

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Format="C2", Width="170" },

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="150" },

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="Order Date", EditType="datepickeredit"

    , Edit= new { @@params = DateParams }, Type="date", Format="dd.MM.y"

    , TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Width="150" }

   

};

}

 


Sample:


Screenshot:


Now all the properties are applied to the DatePicker properly and the de-CH locale also working fine in your shared application.



Please get back to us if you need further assistance.


Attachment: 186505sample_7edb55b6.zip

RR Reto Ruemmeli February 8, 2024 10:22 AM UTC

Hi 

thank you for your help.
Now everything works fine.


Sometimes one Character matters :-)


Best Regards, Reto


RR Rajapandi Ravi Syncfusion Team February 9, 2024 05:41 AM UTC

Reto,


We are happy to hear that our provided solution was helpful to resolve your problem.


Please get back to us if you need further assistance.


Loader.
Up arrow icon