Thousands and Decimals separator

[Alfredo Bonilla]

Hi, 

I have a custom wrapper component implementing ejs-numerictextbox and I want to use a different number format and be able to have an option to change it dynamically. By default, the format should be 1,000,000.00  and I want to also have a way to change it to 1.000.000,00.

I've tried to use a combination of format and locale properties but in the end, it only works for , as thousands separator and . for decimals but not otherwise. 

How can I have a property in my component defining which form should be used?

Thanks, 

Alfredo

[Sureshkumar P]

Hi Alfredo, 

 

Greetings from Syncfusion support.  

 

Based on your shared information. We have validated and created the sample with dynamic culture changing. Please check the below sample.  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/numerictextboxLocale-2047571374  

 

please check the above sample and let us know whether it suits your requirement. if not please get revert us with details. 

 

Regards, 

Sureshkumar P 

[Alfredo Bonilla]

Hi Sureshkumar, 

Thanks for the reply and the example. For some reason, it is not working, not able to run npm install successfully. Also, I'm seeing in the code it is loading a bunch of locale files, is it possible to apply change ejs-numerictextbox format as described in the first post without uploading locale files?

Thanks, 

Alfredo.

[Sureshkumar P]

Hi Alfredo, 

 

Thanks for your update.  

 

We can able to achieve the expected format without loading locale files. Locale files are used to load the locale texts based on respective culture. And we must load the globalization files (numbers.json, numberingSystems.json ) to achieve your requirement.  

 

 

Kindly refer the below code example 

import { Component } from '@angular/core'; 

import { loadCldr, setCulture, Ajax, enableRipple } from '@syncfusion/ej2-base'; 

declare var window: Window & { culture: string }; 

//enable ripple style 

enableRipple(true); 

// Assign windoe variable culture. 

window.culture = 'it'; 

// assign the culture to application globally. 

setCulture(window.culture); 

@Component({ 

    selector: 'app-root', 

    templateUrl: './app.component.html', 

    styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

    public cultureData: Object[] = [ 

        { Id: 'fr', country: 'French' }, 

        { Id: 'de', country: 'German' }, 

        { Id: 'it', country: 'Italian' } 

    ]; 

    // variable for preventing the culture files load multiple times 

    public loadedCultures: string[] = ['it']; 

    // maps the appropriate column to fields property 

    public fields: Object = { text: 'country', value: 'Id' }; 

 

    public waterMark: string = 'Select a game'; 

    // set the value to select an item based on mapped value at initial rendering 

    public value: string = 'it'; 

    public onChange(args: any): void { 

        if (this.loadedCultures.indexOf(args.value) === -1) { 

            this.loadedCultures.push(args.value); 

        } 

        setCulture(args.value); 

    } 

    ngOnInit(): void { 

        this.loadedCultures.push(window.culture); 

        this.loadCultureFiles(window.culture); 

    } 

    loadCultureFiles(name: string) { 

        if (name === 'en-US') { 

            return; 

        } 

        let files: string[] = ['numbers.json', 'numberingSystems.json']; 

 

        let loadCulture = function (prop: any) { 

            let val: string, ajax: Ajax; 

            if (prop === files.length - 1) { 

                ajax = new Ajax('http://localhost:4200/assets/cldr-data/supplemental/' + files[prop], 'GET', false); 

            } else { 

                ajax = new Ajax('http://localhost:4200/assets/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

            } 

            ajax.onSuccess = function (value: any) { 

                val = value; 

                loadCldr(JSON.parse(val)); 

            }; 

            ajax.send(); 

 

        }; 

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

            loadCulture(prop); 

        } 

    }    

 

} 

 

 

 

please check the above code example and let us know whether it suits your requirement. if not please get revert us with details. 

 

Regards, 

Sureshkumar P 

[Alfredo Bonilla]

Thanks Sureshkumar, it is now working. The problem now is that there's an error with date pickers, is there a way to bypass the culture definition for other components like date pickers? I only want to have it defined for numeric textboxes.

Here is the output of the error:

vendor.js:75260 ERROR TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.getCultureValues (vendor.js:193124)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContentHeader (vendor.js:193160)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContent (vendor.js:193108)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.Calendar.createContent (vendor.js:194871)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.render (vendor.js:193004)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.Calendar.render (vendor.js:194760)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.show (vendor.js:196716)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.dateIconHandler (vendor.js:196202)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:14267)

defaultErrorLogger @ vendor.js:75260

vendor.js:75260 ERROR TypeError: Cannot read property 'months' of undefined

    at Function.push../node_modules/@syncfusion/ej2-base/src/intl/date-parser.js.DateParser.dateParser (vendor.js:186162)

    at Internationalization.push../node_modules/@syncfusion/ej2-base/src/internationalization.js.Internationalization.getDateParser (vendor.js:185643)

    at Internationalization.push../node_modules/@syncfusion/ej2-base/src/internationalization.js.Internationalization.parseDate (vendor.js:185678)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.strictModeUpdate (vendor.js:196471)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.inputBlurHandler (vendor.js:196282)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:14267)

    at Object.onInvokeTask (vendor.js:93753)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:14266)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:14039)

    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.js:14342)

[Sureshkumar P]

Hi Alfredo, 

 

Thanks for your update.  

 

Based on your last update (“is it possible to apply change ejs-numerictextbox format as described in the first post without uploading locale files?). we have given the code example but when you have loaded globalized controls like date pickers you need to load all the locale and globalized files.  

 

Please refer our earlier April 14^th update to resolve this issue. And to know more about globalization about date pickers please refer the below documentation links.  

 

Calendar : https://ej2.syncfusion.com/angular/documentation/calendar/globalization/?no-cache=1  

 

DatePicker : https://ej2.syncfusion.com/angular/documentation/datepicker/globalization/  

 

DateTimePicker: https://ej2.syncfusion.com/angular/documentation/datetimepicker/globalization/  

 

DateRangePicker: https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization/  

 

TimePicker: https://ej2.syncfusion.com/angular/documentation/timepicker/globalization/  

 

Regards, 

Sureshkumar P 

[Alfredo Bonilla]

Thanks for the help Sureshkumar, it is now working for me.

[Sureshkumar P]

Hi Alfredo, 

 

Thanks for your update. Please get back to us if you need any further assistance on this.  

 

Regards, 

Sureshkumar P