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. Image for the cookie policy date

Doesn't change currency in grid column


I want to add turkish lira sign in grid column. When i applied following code, grid price column is shown {241:C} , {246:C}, {789:C}, {400:C} but they should be ₺240.89, ₺245.79, ₺789 and ₺400. I have an another column format problem too. How can i fix them


  <e-column field='price' headerText='Ücret' width='150' format="{0:C}" textAlign='Center'></e-column>

Attachment: Capture_4238e4a1.rar

3 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team February 10, 2020 01:01 PM UTC

Hi Tümer, 
Thanks for contacting Syncfusion support. 
From this query we found that you want to provide the custom currency format (i.e.  turkish lira) for the Grid currency column. If you want to use any culture currency, then you must need to load that culture file into your project. After loading the currency file you can use setCulture and setCurrencyCode methods to provide that loaded culture formats to the EJ2 controls. Please refer the following code snippet, 
<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'> 
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
        <e-column field='OrderDate' headerText='Order Date' width='130' [format]='formatoptions' textAlign='Right'></e-column> 
        <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
export class AppComponent { 
    public data: Object[]; 
    public ddldata: Object[]; 
    public pageSettings: Object; 
    public filterSettings: Object; 
    public filteringType: Object[] = [ 
        { Id: 'Menu', type: 'Menu' }, 
        { Id: 'CheckBox', type: 'Checkbox' }, 
        { Id: 'Excel', type: 'Excel' } 
    public ddlfields: Object = { text: 'type', value: 'Id' }; 
    public formatoptions: Object; 
    public numberFormat: string; 
    public grid: GridComponent; 
    ngOnInit(): void { 
    loadCldr(calendar, timeZoneNames, weekData, numbers, numberingSystems, currencies); 
        this.data = orderDataSource; 
        this.pageSettings = { pageCount: 5 }; 
        this.filterSettings = { type: 'Menu' }; 
        this.ddldata = this.filteringType; 
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' } 
    public onChange(e: ChangeEventArgs): void { 
        this.grid.filterSettings.type = <FilterType>e.value; 
We have prepared the demo sample with this requirement and you can find that sample from the below link, 
Also, please change the format property value to “C” from {0:C}. 
Prasanna Kumar N.S.V 

Tümer February 11, 2020 11:13 AM UTC


Thank you for your response. But unfortunately it didn't work for me. Can it be because of metronic theme ? For example when i removed  this.cdr.detectChanges(); grid is gone.In addition adding currency setting causes not showing my schudeler in another page.

<kt-portlet [class]="'kt-portlet--height-fluid'">
  <kt-portlet-header [title]="'Danışan Paketleri'">
    <ng-container ktPortletTools>
      <a rel='nofollow' href="javascript:;" class="btn btn-primary kt-margin-r-10" color="primary" (click)="btnNewPackage()" mat-raised-button matTooltip="Yeni Paket Ekle">
        <span class="kt-hidden-mobile">Yeni Paketspan>
    <div class="control-section">
      <ejs-grid [dataSource]='gridDataSource' allowPaging='true' height='365'  [pageSettings]='initialPage' >
              <e-column field='description' headerText='Paket Adı'   width='70' textAlign='Right'>e-column>
              <e-column field='price' headerText='Ücret' format='C2' width='80' textAlign='Center'>e-column>
              <e-column field='createdAt' type='date' headerText='Oluşturulma Tarihi' [format]="formatoptions" width='150' textAlign='Center'>e-column>                    

import timeZoneNames from '../../../../assets/clrd-data/timeZoneNames.json';
import numbers from '../../../../assets/clrd-data/numbers.json';
import currencies from '../../../../assets/clrd-data/currencies.json';
import numberingSystems from '../../../../assets/clrd-data/numberingSystems.json';
import weekData from '../../../../assets/clrd-data/weekData.json';
import { EditServicePageServiceGridComponent } from '@syncfusion/ej2-angular-grids';
import { L10nsetCulturesetCurrencyCodeloadCldr } from '@syncfusion/ej2-base';

  selector: 'kt-packagegroups',
  templateUrl: './packagegroups.list.component.html',
  styleUrls: ['./packagegroups.list.component.scss'],
  changeDetection:  ChangeDetectionStrategy.OnPush

export class PackageGroupsListComponent implements OnInit {
  packageGroupsIPackageGroup[] = [];
  gridDataSourceObject[] = [];
  public formatoptions = { type: 'date',  format: 'dd/MM/yyyy' }   
  public initialPageObject;

  public pageOptionsobject;
  public editSettingsobject;
  public toolbarstring[];

  @ViewChild('grid',{static: false})
    public gridGridComponent;

  @ViewChild('toggleBtn', {static: false})
  public toggleBtnButtonComponent;
  constructor(private dataServicePackageDataServiceprivate packageGroupServicePackageGroupServiceprivate cdrChangeDetectorRefprivate routerRouter) {  
    this.packageGroupService.getPackageGroups().subscribe(response => {
      this.gridDataSource = response;

  ngOnInit() {
    this.initialPage = { pageSizes: truepageCount: 4 };


Attachment: Capture_6eb944eb.rar

PK Prasanna Kumar Viswanathan Syncfusion Team February 13, 2020 06:56 AM UTC

Hi Tümer, 
Thanks for the update. 
By default in EJ2 Grid control we used Javascript globalized culture not a metronic theme and using Javascript culture we are set the locale’s based on CLDR data we apply the culture to the Grid.  
And the CLDR data files for the corresponding culture files is available as npm package. So, you can install it through the below command. 

npm install cldr-data 

Steps to install and refer the CLDR files :  
1. Run the above command. 
2. The CLDR data files will be downloaded in a folder. 
3. Now load the culture files using “LoadCldrData” and set the culture using “SetCulture” method. 
Please get back to us if you need further assistance. 
Prasanna Kumar N.S.V

Live Chat Icon For mobile
Up arrow icon