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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamicly change Language (locale) of an Date Format

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
loading
Tags: Grid
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.



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; 
    } 
  } 



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

Regards, 
Thavasianand S. 


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.

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 
  } 


                              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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon