When use "C2" currency format on tag e-colmns = data dismiss, without format param works correctly

[Jan Richter]

Hello, when I use params "format" and set value "C2", data from grid dismiss, but paginator shows pages.

in app.component.ts

import {L10n, loadCldr, setCulture, setCurrencyCode} from '@syncfusion/ej2-base';
import * as EJ2_LOCALE from '@syncfusion/ej2-locale/src/cs.json';
import * as currencies from 'cldr-data/main/cs/currencies.json';
import * as cagregorian from 'cldr-data/main/cs/ca-gregorian.json';
import * as numbers from 'cldr-data/main/cs/numbers.json';
import * as timeZoneNames from 'cldr-data/main/cs/timeZoneNames.json';
setCulture('cs');
setCurrencyCode('EUR');
L10n.load({cs: EJ2_LOCALE.cs});
loadCldr(currencies, cagregorian, numbers, timeZoneNames);

This part of code, set localization in my app.

in grid.module:

providers: [
    ServicesService,
    FileUploadService,
    AggregateService
],

in: grid.component:

import {GridComponent, ToolbarItems, SelectionSettingsModel} from '@syncfusion/ej2-angular-grids';

@ViewChild('gridClients', {static: true}) gridClients: GridComponent;
@ViewChild('gridServices', {static: true}) gridServices: GridComponent;
public pageSettings = {};
public toolbar: ToolbarItems[];
public selectionOptions: SelectionSettingsModel;
clientElements: any[] = [];
serviceElements: any[] = [];

ngOnInit(): void {
    this.pageSettings = {pageCount: 5};
    this.selectionOptions = {type: 'Multiple', mode: 'Both'};
    this.toolbar = ['Search'];

in grid.html:

<ejs-grid #gridServices [dataSource]='serviceElements'
          allowPaging="true"
          [pageSettings]='pageSettings' [toolbar]='toolbar'
          (created)="createdServices()" [selectionSettings]='selectionOptions'>
    <e-columns>
        <e-column field='name' headerText='Název služby'
                  width='150'></e-column>
        <e-column field='price' headerText='Cena služby' width='150'
                  textAlign='Right' format="C2"></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="price" type="Sum" format="C2">
                    <ng-template #footerTemplate let-serviceElements>Celkem: {{serviceElements.Sum}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
        <e-aggregate>
            <e-columns>
                <e-column type="Average" field="price" format="C2">
                    <ng-template #footerTemplate let-serviceElements>Průměr: {{serviceElements.Average}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
        <e-aggregate>
            <e-columns>
                <e-column field="price" type="Max" format="C2">
                    <ng-template #footerTemplate let-serviceElements>Max: {{serviceElements.Max}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>

Currency format not working, and data in grid dismiss.

PS: screen-shot as attachment in zip.

Any help? please.

Thanks.

J.R.

Attachment: Snímek_obrazovky_20210421_v 19.01.47_e55b6ee5.zip

[Ajith Govarthan]

Hi Jan, 

Thanks for contacting Syncfusion support. 

Query: Currency format not working, and data in grid dismiss. 

 

Based on your attached code example we have prepared sample and found everything works fine at our end without any mentioned issues. So, for your convenience we have attached the sample please refer them for your reference. 

Code Example: 

App.component.html 

<div class="control-section"> 

  <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' [locale]="de" allowPaging='true' 

    [pageSettings]='pageSettings'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true'> 

      </e-column> 

      <e-column field='OrderDate' headerText='Order Date' width='120' format="yMd" textAlign='Right'> 

      </e-column> 

      <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'> 

      </e-column> 

      <e-column field='Freight' headerText='Freight' width='150' format="C2"> 

      </e-column> 

      <e-column field='ShipCity' headerText='Ship City' width='150' editType='dropdownedit' [edit]='editparams'> 

      </e-column> 

    </e-columns> 

    <e-aggregates> 

      <e-aggregate> 

        <e-columns> 

          <e-column type="Sum" field="Freight" format="C2"> 

            <ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template> 

          </e-column> 

        </e-columns> 

      </e-aggregate> 

      <e-aggregate> 

        <e-columns> 

          <e-column type="Average" field="Freight" format="C2"> 

            <ng-template #footerTemplate let-data>Average: {{data.Average}}</ng-template> 

          </e-column> 

        </e-columns> 

      </e-aggregate> 

    </e-aggregates> 

  </ejs-grid> 

</div> 

Sample Link: https://stackblitz.com/edit/angular-ceqiku-t3bfzl?file=app.component.html 

If you still face the issue, then please share the below details to find the root cause of the issue. 

1. If possible, please try to reproduce the issue in the attached sample.

2. Please let us know that if you face any script error in the console.

 

3. Please check with the actionFailure event and please let us know if you face any issues in the actionFailure event.

4. Share the syncfusion package version.

 

Regards, 

Ajith G.