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

Doesn't change currency in grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

151349 Feb 7,2020 11:24 AM UTC Feb 13,2020 06:56 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Tümer
Asked On February 7, 2020 11:24 AM UTC

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 [Syncfusion]
Replied On 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, 
 
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, 
 
 
Also, please change the format property value to “C” from {0:C}. 
 
Regards, 
Prasanna Kumar N.S.V 
 


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

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 { EditServicePageServiceGridComponent } from '@syncfusion/ej2-angular-grids';
import { L10nsetCulturesetCurrencyCodeloadCldr } 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 {
  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;
      this.cdr.detectChanges();            
    });
  }

  ngOnInit() {
  
    loadCldr(calendartimeZoneNamesweekDatanumbersnumberingSystemscurrencies); 
    setCulture('tr'); 
    setCurrencyCode('TRY');    
    this.initialPage = { pageSizes: truepageCount: 4 };
  }

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


Attachment: Capture_6eb944eb.rar

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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. 
 
Regards,
Prasanna Kumar N.S.V
 


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