How to set different cultures in ASP.NET MVC Grid?
This knowledge base explains how to set the different cultures in the ASP.NET MVC Grid. For applying internationalization and localization, you need to load the culture-related files in your application. You can get these files by running the following npm command,
npm install cldr-data
After installing cldr-data, you can get cldr-data for the required locale using the following way.
function loadCultureFiles(name) {
// Required culture files.
var files = ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'];
if (name === 'fr') {
files.push('numberingSystems.json');
}
var loader = ej.base.loadCldr;
var loadCulture = function (prop) {
var val, ajax;
// Culture files are loaded into the application.
if (name === 'fr' && prop === files.length - 1) {
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
}
else {
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/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);
}
}
You can also find localization files for all other cultures in our ej2-locale github repository.
The Internationalization library is used to globalize number, date, and time values in the Grid component. You can set the currency code as per your requirement using the setCurrencyCode method in your Grid application.
<script>
document.getElementById('localefr').onclick = () => {
loadCultureFiles("fr");
ej.base.setCulture('fr'); // Change the culture.
ej.base.setCurrencyCode('EUR'); // Change the currency code.
};
document.getElementById('localeen').onclick = () => {
ej.base.setCulture('en-US'); // Change the culture.
ej.base.setCurrencyCode('USD'); // Change the currency code.
};
</script>
The Localization library allows you to localize the default text content of the Grid. In the following demo, the locale text for the fr culture is loaded through the L10n.load function. The culture can be changed using the setCulture method.
var ajax = new ej.base.Ajax(location.origin + '/../../Scripts/fr.json', 'GET', false); //Load the fr json culture file.
ajax.send().then((e) => {
var loader = JSON.parse(e);
ej.base.L10n.load(
loader
);
});
ej.base.setCulture('fr'); // Change the culture.
Output
You can find the sample here
Documentation
https://ej2.syncfusion.com/aspnetmvc/documentation/grid/global-local/
https://ej2.syncfusion.com/aspnetmvc/documentation/common/internationalization/
https://ej2.syncfusion.com/aspnetmvc/documentation/common/localization/
Conclusion
I hope you enjoyed learning about how to set different cultures in ASP.NET MVC Grid.
You can refer to our ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
