Dynamicly change Language (locale) of an Date Format

Yannik Nagel

Asked On June 13, 2019 12:12 PM UTC

Hi,

our application has the possiblity to change the UI Language. How do i change the language of the Column Fields, formated like this:

to german (In the Typescript code so i can change it when the user selects a different language)?

Now:

Should be (For example):

Angulars DatePipe supports this like this (Which i cannot use because the column wouldnt sort correctly)

So how do i dynamicly change the language of the column? The languages are pre defined currently (only en-UK and de-DE).

For your Information:

Ive tried those two

but they dont seem to work.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On June 17, 2019 12:35 PM UTC

Hi Yannik,

Greetings from Syncfusion support.

We have validated your query and prepared the sample for your reference. You can dynamically change the culture by using setCultre() method. Please find the below code snippet and sample for your reference.

App.component.html

<button ejs-button id='print' (click)='buttonClick()'>Change Locale</button>

<ejs-grid #grid [dataSource]='data' allowPaging='true' (dataBound)="databound($event)" [allowPdfExport]='true' >

<e-columns>

<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>

<e-column field='Freight' headerText='Freight' type='number' width='120' format='C2'></e-column>

<e-column field='OrderDate' headerText='Order Date' type='date' width='130' format="yMd" textAlign='Right'></e-column>

<e-column field='ShipCountry' headerText='Ship Country' width='170'></e-column>

</e-columns>

</ejs-grid>

App.component.ts

export class DefaultComponent implements OnInit {

public data: Object[] = [];

@ViewChild('grid')

public grid: GridComponent;

public initialPage: Object;

public toolbar;

public cultureChange = false;

ngOnInit(): void {

this.data = orderDatas;

}

buttonClick(args) {

this.cultureChange = true;

setCulture('pt'); // Change the Grid culture

setCurrencyCode("BRL"); // Change the currency code

}

databound(args) {

if(this.cultureChange){

this.cultureChange = false;

}

Sample: https://stackblitz.com/edit/angular-wtifyf-upolxf?file=default.html

Documentation: https://ej2.syncfusion.com/angular/documentation/common/internationalization/#changing-global-culture-and-currency-code

Please get back to us, if you need further assistance.

Regards,

Thavasianand S.

Reply | Reply with quote

Yannik Nagel

Replied On June 18, 2019 12:23 PM UTC

Thank you for answering me.

Ive tried the setCulture method, but its not working.

Yes, the grid has "de" in its locale parameter but the values are not changing to the new locale.

Ive added the gregorian file for de too.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On June 19, 2019 09:21 AM UTC

Hi Yannik,

we have analyzed your query. We suspect you have missing some files. We have prepared a sample with “de” locale. Please find the below code snippet and sample and documentation link for your reference.

App.component.html

<button ejs-button id='print' (click)='buttonClick()'>Change Locale</button>

<ejs-grid #grid [dataSource]='data' allowPaging='true' [allowPdfExport]='true' >

<e-columns>

<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>

<e-column field='Freight' headerText='Freight' type='number' width='120' format='C2'></e-column>

<e-column field='OrderDate' headerText='Order Date' type='date' width='130' format='yMd' textAlign='Right'></e-column>

<e-column field='ShipCountry' headerText='Ship Country' width='170'></e-column>

</e-columns>

</ejs-grid>

App.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

import { orderDatas } from './data';

import { GridComponent } from '@syncfusion/ej2-angular-grids';

import * as cagregorian from "./ca-gregorian.json";

import * as currencies from "./currencies.json";

import * as numbers from "./numbers.json";

import * as timeZoneNames from "./timeZoneNames.json";

loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files

@Component({

selector: 'control-content',

templateUrl: 'default.html'

})

export class DefaultComponent implements OnInit {

public data: Object[] = [];

@ViewChild('grid')

public grid: GridComponent;

public initialPage: Object;

public toolbar;

public cultureChange = false;

ngOnInit(): void {

this.data = orderDatas;

}

buttonClick(args) {

this.cultureChange = true;

setCulture('de'); // Change the Grid culture

setCurrencyCode('EUR');// Change the currency code

}

Sample: https://stackblitz.com/edit/angular-145243-de-format?file=default.html

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/global-local/?no-cache=1#internationalization

https://ej2.syncfusion.com/angular/documentation/grid/global-local/#internationalization

If you still faced the issue, Please share the following details,

Please share the complete Grid code
Share the files referred for locale
Please try to reproduce the issue in above sample, If possible

Please get back to us with the above details that will help us to provide a better solution as soon as possible.

Regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145243	Jun 13,2019 12:12 PM UTC	Jun 19,2019 09:21 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US