Dynamicly change Language (locale) of an Date Format

[Yannik Nagel]

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.

[Thavasianand Sankaranarayanan]

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. 

[Yannik Nagel]

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.

[Thavasianand Sankaranarayanan]

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, 

1. Please share the complete Grid code
2. Share the files referred for locale
3. 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.