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
close icon

regional globalization project

Hello

First, thank you for offering some wonderful tools, for what little I have been using are very good.

I have a query, I'm working on an ASP.NET MVC project and I need to know if there is any way that my entire project is left with the globalization of my country. (es-CO)

Reviewing the documentation, I see that for each component there is a configuration.

- another doubt, I'm sorry for being something new, in the documentation asks to be "Install the CLDR-Data", how do I add it to my mvc project ?.

Thank you very much for your help.

Greetings,

3 Replies

JA Jesus Arockia Sankaran S Syncfusion Team November 9, 2018 01:36 PM UTC

Hi Norberto,  

Thanks for contacting Syncfusion products.  

We have analyzed your query and created sample ASP.Net MVC project for detailed reference. We have listed the information to be followed below along with sample download link.  


For Internationalization, you need to include cldr files into your application. You need to download cldr-data globally in any location by using below command. 
 
Command: 
npm install cldr-data 
 
After installing cldr-data, you can find cldr-data for all locale in this location(node_modules->cldr-data->main). You need to copy the required(or all) locale cldr-data and paste into your application folder(Scripts->cldr-data->main->paste copied cldr files). 
 
You need to include cldr-data into your application and refer file location in index.cshtml file like below code example. Please find the below code example for your reference. 

[code example] [index.cshtml] 
<div class="col-lg-8 control-section"> 
    <div id="wrapper"> 
        <div id="calender-control"> 
            @Html.EJS().Calendar("calendar").Change("startDate").Render() 
            <br> 
            <span id="date_label"> Selected Value: </span> 
        </div> 
    </div> 
</div> 
<div id="propertySection" class="col-lg-4 property-section"> 
    <div class="radio-control" id="property" title="Select a Locale"> 
        <div class="row"> 
            @Html.EJS().RadioButton("en").Label("English").Name("locale").Value("en").Change("onLocaleChange").Render() 
        </div> 
        <div class="row"> 
            @Html.EJS().RadioButton("de").Label("German").Name("locale").Value("de").Change("onLocaleChange").Checked(true).Render() 
        </div> 
        <div class="row"> 
            @Html.EJS().RadioButton("ar").Label("Arabic").Name("locale").Value("ar").Change("onLocaleChange").Render() 
        </div> 
    </div> 
</div> 
 
 
<script> 
   function startDate(args) { 
        /*Displays selected date in the label*/ 
        (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString(); 
    } 
 
    function onLocaleChange(args) { 
        /*Apply selected format to the component*/ 
        var culture = args.value; 
        calendarObject.locale = culture; 
       calendarObject.enableRtl = calendarObject.locale === 'ar' ? true : false; 
        if (culture !== 'en') { 
            loadCultureFiles(culture); 
        } 
        globalize = new ej.base.Internationalization(calendarObject.locale); 
        if (calendarObject.value) { 
            var dateString = globalize.formatDate(calendarObject.value); 
            (document.getElementById('date_label')).textContent = 'Selected Value: ' + dateString; 
        } 
 
    } 
 
    document.addEventListener('DOMContentLoaded', function () { 
        calendarObject = document.getElementById('calendar').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
 
        L10n.load({ 
            "de": { 
                "calendar": { 
                    "today": "heute" 
                } 
            }, 
            "en": { 
                "calendar": { 
                    "today": "Today" 
                } 
            }, 
            "ar": { 
                "calendar": { 
                    "today": "اليوم" 
                } 
            }, 
 
 
        }); 
        loadCultureFiles('de'); 
        calendarObject.locale = 'de'; 
    }); 
    function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        if (name === 'ar') { 
            files.push('numberingSystems.json'); 
        } 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            if (name === 'ar' && 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; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
</script> 

Also, please get back to us if you require any further assistance on this.  

Regards,  
Jesus Arockia Sankaran S 



NO Norberto November 9, 2018 08:03 PM UTC

Hello Jesus Arockia Sankaran S

Thank you very much, with your example, guide a lot, and my problem is solved.

You're the best.

thank you


SM Saranya Murugasamy Syncfusion Team November 12, 2018 08:53 AM UTC

Hi Norberto, 
 
We are happy that the your problem has been solved.  Please get back to us if you need any further assistance.  

Regards, 
Saranya M 


Loader.
Live Chat Icon For mobile
Up arrow icon