We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Is it possible to change the locale to es-MX to format the date?

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

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?


9 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team June 17, 2019 01:20 AM

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 :  


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. 


JC Juan Cruz replied to Thavasianand Sankaranarayanan June 17, 2019 01:50 PM

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 :  


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


HJ Hariharan J V Syncfusion Team June 18, 2019 07:51 AM

Hi Andrew, 

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

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 


JC Juan Cruz June 18, 2019 10:36 AM

I share the grid code

Attachment: grid_datetime_locale_34bf2c1a.rar

TS Thavasianand Sankaranarayanan Syncfusion Team June 19, 2019 07:46 AM

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> 


 
Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


JC Juan Cruz June 19, 2019 11:18 AM

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

PS Pavithra Subramaniyam Syncfusion Team June 20, 2019 05:15 AM

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. 


JC Juan Cruz June 20, 2019 09:44 AM

Thanks for your help. Greetings from Mexico

TS Thavasianand Sankaranarayanan Syncfusion Team June 21, 2019 02:06 AM

Hi Juan, 
 
Thanks for your appreciation. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon