Locale implementation

[Namita]

Hi

I implemented the Locale i. e 'de-DE'. According to this locale my number type field should show comma(,) instead of decimal(.).

But it still taking (.).

ts file:-

L10n.load({

'de-DE': {

'grid': {

'EmptyRecord': 'Keine Aufzeichnungen angezeigt',

'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',

'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',

'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',

'Item': 'Artikel',

'Items': 'Artikel'

},

'pager': {

'currentPageInfo': '{0} von {1} Seiten',

'totalItemsInfo': '({0} Beiträge)',

'firstPageTooltip': 'Zur ersten Seite',

'lastPageTooltip': 'Zur letzten Seite',

'nextPageTooltip': 'Zur nächsten Seite',

'previousPageTooltip': 'Zurück zur letzten Seit',

'nextPagerTooltip': 'Zum nächsten Pager',

'previousPagerTooltip': 'Zum vorherigen Pager'

}

}

});

setCulture('de-DE');

in html:-

height='auto' width="1000px" (rowDeselected)='rowDeselected($event)'

[toolbar]='toolbar' (toolbarClick)='clickHandler($event)' (rowSelected)='rowSelected($event)'

[contextMenuItems]='contextMenuItems' (contextMenuClick)='contextMenuClick($event)'

allowSorting='true' showColumnMenu='true' allowGrouping='true'

[filterSettings]='filterSettings' allowReordering="true"

[allowPdfExport]='true' [allowExcelExport]='true' gridLines='Both'

[allowPaging]='true' [pageSettings]='pageSetting' allowResizing='true'

[allowFiltering]='true' (dataStateChange)='dataStateChange($event)' [locale]='de-DE'>

I want to apply locale in data like in number fields and date fields

Looking forward, Thanks

SIGN IN To post a reply.

[Manivel Sellamuthu]

Hi Namita, 

Greetings from Syncfusion support. 

We would like to inform you that applying locale will through L10n, will change only the default texts of Grid component. But to apply the culture to the number and date formats we need to refer the json files for number, date fields through loadCldr method. Please refer the below code example, sample and documentation for better understanding. 

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

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

import { orderDatas } from './data'; 

import { GridComponent,ToolbarItems } 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"; 

import * as deculture from "./deall.json"; 

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

L10n.load(deculture); 

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

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

 

@Component({ 

  selector: 'control-content', 

  templateUrl: 'default.html' 

}) 

export class DefaultComponent implements OnInit { 

  public data: Object[] = []; 

  @ViewChild('grid', {static: true}) 

  public grid: GridComponent; 

 

  ngOnInit(): void { 

    this.data = orderDatas; 

  } 

} 

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

Sample: https://stackblitz.com/edit/155460-locale-global?file=default.component.ts 

You can obtain the JSON files for globalization from the NPM package named cldr data. Please refer the below  documentation for more information. 

https://ej2.syncfusion.com/angular/documentation/common/internationalization/#internationalization 

Please let us know, if you need further assistance. 

Regards, 

Manivel