Is it possible to change the locale to es-MX to format the date?

[Juan Cruz]

Hi, I'm setting up a grid with locale es-MX and I'm trying to get the name of each month and day in Spanish. I made a .js file that I call in each grid that I have and what is this:

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

        ej.base.setCulture('es');

        ej.base.setCurrencyCode('MXN');

        ej.base.L10n.load({

            "es-ES": {

                "grid": {

                    "GroupDropArea": "Arrastre una columna para agrupar",

                    "autoFitAll": "Ajuste automático de todas las columnas",

                    "autoFit": "Ajuste automatico de esta columna",

                    "Group": "Agrupar sobre esta columna",

                    "Ungroup": "Desagrupar sobre esta columna",

                    "SortAscending": "Ordenar ascendente",

                    "SortDescending": "Ordenar descendente",

                    "Columnchooser": "Mostrar/Ocultar columnas",

                    "FilterMenu": "Filtrado",

                    "FilterButton": "Filtrar",

                    "ClearButton": "Limpiar",

                    "StartsWith": "Empieza con...",

                    "EndsWith": "Termina con...",

                    "Contains": "Contiene",

                    "Equal": "Igual a",

                    "NotEqual": "Diferente de",

                    "LessThan": "Menor que",

                    "LessThanOrEqual": "Menor o igual que",

                    "GreaterThan": "Mayor que",

                    "GreaterThanOrEqual": "Mayor o igual que",

                    "EnterValue": "Introduzca un valor",

                    "Excelexport": "Exportar",

                    "Add": "Nuevo registro",

                    "Update": "Guardar",

                    "Cancel": "Cancelar",

                    "EditOperationAlert": "Seleccione un registro para editar",

                    "DeleteOperationAlert": "Seleccione un registro para dar de baja",

                    "Search": "Busqueda",

                    "Edit": "Editar",

                    "Delete": "Baja",

                    "ClearFilter": "Limpiar filtro",

                    "UnGroup": "Haga clic aqui para desagrupar",

                    "SelectAll": "Seleccionar todo",

                    "CancelButton": "Cancelar",

                    "TextFilter": "Criterio de filtrado",

                    "EmptyRecord": "No hay registros"

                },

                "pager": {

                    "FirstPage": "Primera página",

                    "LastPage": "Ultima página",

                    "PreviousPage": "Página anterior",

                    "NextPage": "Página siguiente",

                    "currentPageInfo": "Página {0} de {1}",

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

                    "previousPageTooltip": "Página anterior",

                    "nextPageTooltip": "Página siguiente",

                    "previousPagerTooltip":"Página anterior",

                    "nextPagerTooltip": "Página siguiente",

                    "firstPageTooltip": "Ir a la primera página",

                    "lastPageTooltip":"Ir a la última pagina"

                }

            }

        });

    });

and in the columns of the grid is like this:

c.Field("FechaSolicitud").CustomAttributes(new { @class = "customcss" }).Format(new { type = "date", format = "MM-yyyy" }).Width(150).Add();

c.Field("FechaActividad").CustomAttributes(new { @class = "customcss" }).Format(new { type = "dateTime", skeleton= "medium" }).Width(150).Add();

but even though I call the .js file, the date is formatted in the locale in en-US. What should I do to be able to change the format?

[Thavasianand Sankaranarayanan]

Hi Andrew, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to load corresponding culture’s(in your case es-MX) CLDR data files using AJAX and also set the locale property for Grid to achieve this requirement. Please refer the below documentations, 

Documentations :  

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

https://ej2.syncfusion.com/documentation/base/api-ajax.html?lang=es5 

https://ej2.syncfusion.com/aspnetmvc/documentation/base/intl.html 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1160600388 

In the below code, we have loaded the cldr data files of Italian culture(you can load the es-MX culture files just like what we have done for italian) to apply the Italian culture formats to the application,  

 

[_Layout.cshtml] 

 

    <script> 

        function loadCultureFiles(name) { 

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

            var loadCulture = function (prop) { 

                var val, ajax; 

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

                ajax.onSuccess = function (value) { 

                    val = value; 

                    ej.base.loadCldr(JSON.parse(val)); 

                }; 

                ajax.send(); 

                ej.base.setCulture('it'); 

                ej.base.setCurrencyCode('EUR'); 

            }; 

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

                loadCulture(prop); 

            } 

        } 

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

            loadCultureFiles('it'); 

        }); 

    </script> 

 

[Index.cshtml] 

 

@Html.EJS().Grid("GridJ2").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping(true).Locale("it")...Render() 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Juan Cruz]

Hi Andrew, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to load corresponding culture’s(in your case es-MX) CLDR data files using AJAX and also set the locale property for Grid to achieve this requirement. Please refer the below documentations, 

Documentations :  

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

https://ej2.syncfusion.com/documentation/base/api-ajax.html?lang=es5 

https://ej2.syncfusion.com/aspnetmvc/documentation/base/intl.html 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1160600388 

In the below code, we have loaded the cldr data files of Italian culture(you can load the es-MX culture files just like what we have done for italian) to apply the Italian culture formats to the application,  

 

[_Layout.cshtml] 

 

    <script> 

        function loadCultureFiles(name) { 

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

            var loadCulture = function (prop) { 

                var val, ajax; 

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

                ajax.onSuccess = function (value) { 

                    val = value; 

                    ej.base.loadCldr(JSON.parse(val)); 

                }; 

                ajax.send(); 

                ej.base.setCulture('it'); 

                ej.base.setCurrencyCode('EUR'); 

            }; 

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

                loadCulture(prop); 

            } 

        } 

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

            loadCultureFiles('it'); 

        }); 

    </script> 

 

[Index.cshtml] 

 

@Html.EJS().Grid("GridJ2").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping(true).Locale("it")...Render() 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

I already did the test with the example (Italian - it), download the files .json for is-MX but the changes are not reflected

[_Layout.cshtml] 

 

    <script> 

        function loadCultureFiles(name) { 

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

            var loadCulture = function (prop) { 

                var val, ajax; 

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

                ajax.onSuccess = function (value) { 

                    val = value; 

                    ej.base.loadCldr(JSON.parse(val)); 

                }; 

                ajax.send(); 

                ej.base.setCulture('es'); 

                ej.base.setCurrencyCode('MXN'); 

            }; 

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

                loadCulture(prop); 

            } 

        } 

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

            loadCultureFiles('es'); 

        }); 

    </script> 

 

[Index.cshtml] 

 

@Html.EJS().Grid("GridJ2").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping(true).Locale("es")...Render() 

The doubt is in these three instructions:

ej.base.setCulture('es'); 

ej.base.setCurrencyCode('MXN'); 

@Html.EJS().Grid("GridJ2").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping(true).Locale("es")...Render()

I do not know if they are correct

[Hariharan J V]

Hi Andrew, 

We have analyzed your query. We suggest you to refer to the below documentation for details on “setCulture” and “setCurrencyCode”. 

Documentations :  

https://ej2.syncfusion.com/javascript/documentation/api/base/internationalization/#internationalization 

You need to provide the proper name as “es-MX” or “es”  based on the folder name of the json files you are loading. If you are still facing difficulties in achieveing your requirement. We need more details to further proceed on this and provide you a solution. Please get back to us with the following details, 

1. Share the full Grid code.
2. Share the format you are trying to apply for the date column.
3. Share the screenshot of the rendered Grid, after you have applied the previously provided solution.
4. Share a video demo explaining the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Hariharan 

[Juan Cruz]

I share the grid code

Attachment: grid_datetime_locale_34bf2c1a.rar

[Thavasianand Sankaranarayanan]

Hi Juan, 

We have analyzed the screenshots. We suspect that the “setCulture” was done in Grid before the JSON files get loaded. We suspect that this may have caused the problem you are facing. So we suggest you to call the “setCulture” method inside the “then” function of the AJAX call to overcome the problem you are facing. Please refer the code below, 

    <script> 

        function loadCultureFiles(name) { 

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

            var loadCulture = function (prop) { 

                var val, ajax; 

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

                ajax.onSuccess = function (value) { 

                    val = value; 

                    ej.base.loadCldr(JSON.parse(val)); 

                }; 

                ajax.send().then(function (args) { 

                    ej.base.setCulture('es-MX'); 

                    ej.base.setCurrencyCode('MXN');  

                }); 

                 

            }; 

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

                loadCulture(prop); 

            } 

        } 

 

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

            loadCultureFiles('es-MX'); 

        }); 

 

    </script> 

Documentation : https://ej2.syncfusion.com/documentation/api/base/ajax/ 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Juan Cruz]

I have already made the changes and it works!

I would like to ask one last thing: is it possible to change the font size in the column headings and when grouping records (I send you an image, what is in red)?

Attachment: works_416394c6.rar

[Pavithra Subramaniyam]

Hi Juan,  

You can override the font size of the Grid header and group caption cells by using the below CSS selectors. 

.e-grid span.e-headertext, .e-grid .e-groupcaption { 

     

      font-size:15px; 

     

    } 

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

Regards, 

Pavithra S. 

[Juan Cruz]

Thanks for your help. Greetings from Mexico

[Thavasianand Sankaranarayanan]

Hi Juan, 

 

Thanks for your appreciation. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.