Doesn't change currency in grid column

[Tümer]

Hi,

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

Bests,
Tümer

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

Attachment: Capture_4238e4a1.rar

[Prasanna Kumar Viswanathan]

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, 

 

HTML: 

 

<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'> 

    <e-columns> 

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

    </e-columns> 

</ejs-grid> 

 

TS: 

 

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; 

 

    @ViewChild('grid') 

    public grid: GridComponent; 

 

    ngOnInit(): void { 

    loadCldr(calendar, timeZoneNames, weekData, numbers, numberingSystems, currencies); 

    setCulture('tr'); 

    setCurrencyCode('TRY'); 

        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; 

        this.grid.clearFiltering(); 

    } 

    } 

 

We have prepared the demo sample with this requirement and you can find that sample from the below link, 

 

Demo: https://stackblitz.com/edit/angular-ulxpil-5yvtsl?file=app.component.ts 

 

Also, please change the format property value to “C” from {0:C}. 

 

Regards, 

Prasanna Kumar N.S.V 

 

[Tümer]

Hi,

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>

      a>

    ng-container>

  kt-portlet-header>

  <kt-portlet-body>

    <div class="control-section">

      <ejs-grid [dataSource]='gridDataSource' allowPaging='true' height='365'  [pageSettings]='initialPage' >

          <e-columns>

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

          e-columns>

      ejs-grid>  

    div>

  kt-portlet-body>

kt-portlet>

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 { EditService, PageService, GridComponent } from '@syncfusion/ej2-angular-grids';

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

@Component({

  selector: 'kt-packagegroups',

  templateUrl: './packagegroups.list.component.html',

  styleUrls: ['./packagegroups.list.component.scss'],

  changeDetection:  ChangeDetectionStrategy.OnPush

})

export class PackageGroupsListComponent implements OnInit {

  packageGroups: IPackageGroup[] = [];

  gridDataSource: Object[] = [];

  public formatoptions = { type: 'date',  format: 'dd/MM/yyyy' }   

  public initialPage: Object;

  public pageOptions: object;

  public editSettings: object;

  public toolbar: string[];

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

    public grid: GridComponent;

  @ViewChild('toggleBtn', {static: false})

  public toggleBtn: ButtonComponent;

  

  constructor(private dataService: PackageDataService, private packageGroupService: PackageGroupService, private cdr: ChangeDetectorRef, private router: Router) {  

    this.packageGroupService.getPackageGroups().subscribe(response => {

      this.gridDataSource = response;

      this.cdr.detectChanges();            

    });

  }

  ngOnInit() {

  

    loadCldr(calendar, timeZoneNames, weekData, numbers, numberingSystems, currencies); 

    setCulture('tr'); 

    setCurrencyCode('TRY');    

    this.initialPage = { pageSizes: true, pageCount: 4 };

  }

  btnNewPackage(){

    this.router.navigate(['/packages/add']);

  }

Attachment: Capture_6eb944eb.rar

[Prasanna Kumar Viswanathan]

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. 

 

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

 

Please get back to us if you need further assistance. 

 

Regards,
Prasanna Kumar N.S.V