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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145256 Jun 13,2019 10:46 PM UTC Jun 21,2019 07:06 AM UTC ASP.NET MVC - EJ 2 9
loading
Tags: Grid
Juan Cruz
Asked On June 13, 2019 10:46 PM UTC

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 [Syncfusion]
Replied On June 17, 2019 06:20 AM UTC

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. 


Juan Cruz
Replied On June 17, 2019 06:50 PM UTC

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


Hariharan J V [Syncfusion]
Replied On June 18, 2019 12:51 PM UTC

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 


Juan Cruz
Replied On June 18, 2019 03:36 PM UTC

I share the grid code

Attachment: grid_datetime_locale_34bf2c1a.rar

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 19, 2019 12:46 PM UTC

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. 


Juan Cruz
Replied On June 19, 2019 04:18 PM UTC

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 [Syncfusion]
Replied On June 20, 2019 10:15 AM UTC

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
Replied On June 20, 2019 02:44 PM UTC

Thanks for your help. Greetings from Mexico

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 21, 2019 07:06 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon