Error in format currency

[Fabiano Melo]

Hello

I'm not sure how to install and configure the internationalization of syncfusion correctly. In the documentation it seems that something was missing, or I could not understand. I need to format monetary values ​​on the grid. I am in Brazil, and our standard would be $ 99,999.00, that is, the dot first and then the comma. In the American pattern it is the opposite, that is, first the comma and then the point.

I did it this way and it works, but in the US standard and with the R $ of the Brazilian currency:

this.currencyFormat = {format: 'R$ #, ## 0.00'};

<e-column field = 'ValueNF' [filter] = 'filter' headerText = 'Value NF' textAlign = 'Left' [format] = 'currencyFormat'>

But if I reverse to the example below, it gives error:

this.currencyFormat = {format: 'R$ #. ## 0,00'};

The error is as follows:

ERROR TypeError: Can not read property '1' of null

    at customNumberFormat (vendor.js: 111451)

    at Object.customFormat (vendor.js: 111428)

    at Function.push .. / node_modules/@syncfusion/ej2-base/src/intl/number-formatter.js.NumberFormat.numberFormatter (vendor.js: 111739)

    at Internationalization.push ../ node_modules/@syncfusion/ej2-base/src/internationalization.js.Internationalization.getNumberFormat (vendor.js: 110002)

    at ValueFormatter.push ../ node_modules/@syncfusion/ej2-grids/src/grid/services/value-formatter.js.ValueFormatter.getFormatFunction (vendor.js: 179951)

    at new Column (vendor.js: 171719)

    at prepareColumns (vendor.js: 169666)

    at GridComponent.push ../ node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (vendor.js: 166942)

    at GridComponent.push ../ node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (vendor.js: 108016)

    at vendor.js: 100002

[Madhu Sudhanan P]

Hi Fabiano, 

Thanks for contacting Syncfusion support. 

You can format to Brazilian currency by setting the currency code as “BRL” using setCurrencyCode method and specify the column format as “C2”. 

import { setCulture, setCurrencyCode } from "@syncfusion/ej2-base"; 

setCulture("pt"); 

setCurrencyCode("BRL"); 

<e-column field = 'ValueNF' [filter] = 'filter' headerText = 'Value NF' textAlign = 'Left' format= 'C2'></e-column> 

Regards, 

Madhu Sudhanan P 

[Fabiano Melo]

Hello

I did as you told me.

I did as you told me and it is returning like this: $ 99,999.99

It should look like this: R$ 99.999,99

I tried inserting in the module and in the component itself the calls and I was not successful. Are there any packages that should be installed the most?

There is also another problem, when I try to generate a PDF from the grid, if there is an e-column that has the format parameter, it returns the error below. If you remove the format, it works!

ERROR Error: Uncaught (in promise): TypeError: format.split is not a function

TypeError: format.split is not a function ...

[Madhu Sudhanan P]

Hi Fabiano, 

Thanks for your update. 

As per your requirement we have created a sample for your reference. In the below sample, we have import corresponding culture CLDR files then load and apply locale using loadCldr, setCulture and SetCurrencyCode  method.  

Please refer the below code example and sample for more information. With the below approach the PDF export will work fine.  

<ejs-grid #grid [dataSource]='data' allowPaging='true' [allowPdfExport]='true'  [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'[allowResizing]="true"> 

  <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='120'></e-column> 

      <e-column field='Freight' headerText='Freight' type='number' width='120' format='C2'></e-column> 

  </e-columns> 

</ejs-grid> 

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

 

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

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

setCurrencyCode("BRL"); // Change the currency code 

 

export class DefaultComponent implements OnInit { 

    public data: Object[] = []; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    public toolbar; 

 

    ngOnInit(): void { 

        this.data = orderDatas; 

        this.toolbar = ['PdfExport']; 

    } 

    toolbarClick(args): void { 

        switch (args.item.text) { 

            case 'PDF Export': 

                this.grid.pdfExport(); 

                break; 

        } 

    } 

} 

Sample : https://stackblitz.com/edit/angular-wtifyf-ykypu2?file=default.component.ts  

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/global-local/?no-cache=1#internationalization  

https://ej2.syncfusion.com/angular/documentation/common/localization/?no-cache=1  

Please get back to us if you need further assistance on this. 

Regards, 

Madhu Sudhanan P 

[Vinícius]

Hy, 

don't work to me. 

My code

import * as cagregorian from "cldr-data/main/pt/ca-gregorian.json";
import * as currencies from "cldr-data/main/pt/currencies.json";
import * as numbers from "cldr-data/main/pt/numbers.json";
import * as timeZoneNames from "cldr-data/main/pt/timeZoneNames.json";
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
import * as gregorian from 'cldr-data/main/pt/ca-gregorian.json';

import {loadCldr} from '@syncfusion/ej2-base';
import { setCulture, setCurrencyCode } from "@syncfusion/ej2-base";
setCulture('pt'); // Change the Grid culture
setCurrencyCode("BRL"); // Change the currency code
loadCldr(numberingSystems['default'],cagregorian['default'],currencies['default'], gregorian['default'], numbers['default'], timeZoneNames['default']);

Output $12.00

[Thavasianand Sankaranarayanan]

Hi Vinícius, 

Greetings from Syncfusion support. 

We prepared a sample at our end corresponding to your reported code block. But our side, Brazilian real (BRL) currency format works fine with Pt culture, . 

Please refer to the below code and sample.  

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 numberingSystems from "./numberingSystmes.json" 

 

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

setCurrencyCode("BRL"); // Change the currency code  ( default BRL’s  sign: R$ )  

 

loadCldr(numberingSystems['default'],cagregorian['default'],currencies['default'], numbers['default'], timeZoneNames['default']);   // load json files 

Sample link: https://stackblitz.com/edit/angular-wtifyf-lfcd8x?file=default.component.ts 

Help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/global-local/?no-cache=1#localization 

Link: https://ej2.syncfusion.com/angular/documentation/grid/global-local/?no-cache=1#internationalization 

Still facing the issue, share below details for appropriate solution. 

1. Share your Syncfusion package and angular version.
2. Share your exact requirement briefly.
3. If possible share the issue reproducing sample or reproduce the issue in the above attached sample.

 

Regards, 

Thavasianand S. 

[Stefano]

Hello.

I did all the steps and apparently it had worked.

But another error started to occur, the values ​​are only displayed correctly on the first page of the grid.

When I navigate to the next page of the grid (or go directly to the last page), the values ​​appear without formatting.

Tks.

Stefano

[Balaji Sekar]

Hi Stefano, 

We checked your query with latest version(v18.3.42) of Grid packages but we are unable to reproduce the reported problem. 

We have created a sample with Brazilian real (BRL) currency format in the Freight column using latest version of “ej2-angular-grids(v18.3.42)” and “ej2-base(v18.3.40)’ packages. 

Sample link: https://stackblitz.com/edit/angular-wtifyf-y47eyv  

If you facing same problem, please share the below details to us that will help to validate further. 

1. Share a sample with replicated problem.
2. Share the video demonstration of the problem.
3. Ensure the “ej2-angular-grids” and “ej2-base” package version.

Regards, 

Balaji Sekar