Currency

[Amos]

Hi

The docs say: currency: Specifies the currency code to use in currency formatting. Possible values are the ISO 4217 currency codes, such as ‘USD’ for the US dollar,‘EUR’ for the euro.

Here is the iso: https://en.wikipedia.org/wiki/ISO_4217

While USD EUR and GBP work ok, when selecting ILS or JPY, I see $ sign instead of the real currency symbol. Maybe happens with other currency symbols as well.

Please advice.

[Berly Christopher]

Hi Amos, 

  

Greetings from Syncfusion support. 

  

We validated the reported requirement. The currency symbol for given currency will be obtained from the CLDR data. Therefore, we will need to load the CLDR data for that culture, as well as set the culture of the corresponding currency in the component's locale property.  To resolve the reported issue, please configure the culture in the application and ensure that the CLRD data is loaded. Please see the below code.  

  

For currency symbol “ILS”: 

  

loadCldr( 

  require('cldr-data/main/he/numbers.json'), 

  require('cldr-data/main/he/currencies.json'),  

  require('cldr-data/supplemental/numberingSystems.json'),  

  require('cldr-data/supplemental/currencyData.json'), 

  );  

   

L10n.load({ 

  "he": { 

    "numerictextbox": { 

      "incrementTitle": "ערך תוספת", 

      "decrementTitle": "ערך הפחתה" 

    } 

  } 

}); 

class App extends Component { 

 

  render() { 

    return <NumericTextBoxComponent format="c2" value={10} locale="he" currency='ILS' showSpinButton={true} /> 

     

  }     

} 

 

  

Screenshot: 

  

 

  

For currency symbol “JPY”: 

  

loadCldr( 

  require('cldr-data/main/ja/numbers.json'), 

  require('cldr-data/main/ja/currencies.json'),  

  require('cldr-data/supplemental/numberingSystems.json'),  

  require('cldr-data/supplemental/currencyData.json'), 

  );  

   

L10n.load({ 

  "ja": { 

    "numerictextbox": { 

      "incrementTitle": "増分値", 

      "decrementTitle": "デクリメント値" 

    } 

  } 

}); 

class App extends Component { 

 

  render() { 

    return <NumericTextBoxComponent format="c2" value={10} locale="ja" currency='JPY' showSpinButton={true} /> 

     

  }     

} 

 

  

Screenshot: 

  

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Numeric_164933194032198  

  

Regards, 

Berly B.C 

[Amos]

Thanks but I need the same component to support all currencies, for this reason I did the following:

<NumericTextBoxComponent currency={currency} format='c4' value={sharePrice} decimals={4}
                                         validateDecimalOnType={true} floatLabelType="Always" placeholder="Share price" width="200px"/>

<DropDownListComponent dataSource={currenciesList} text={currency} change={selectCurrency}
                                       floatLabelType="Always" placeholder="Currency" width="200px"/>

so whenever the user changes the dropdown value, the currency symbol should change. This is working for USD EUR GBP. Now I need it to work also for the others so I will need to

1.

loadCldr(
  require('cldr-data/main/ja/numbers.json'),
  require('cldr-data/main/ja/currencies.json'),  
  require('cldr-data/supplemental/numberingSystems.json'),  
  require('cldr-data/supplemental/currencyData.json'),
  );

for ALL available currencies? If so, where can I find this list?

2.

locale="he" - where can I find the correlation between locale code and currency code so I can add a map to my app to connect between the 2 values?

Thanks

[Berly Christopher]

Hi Amos, 

  

For the requested requirement, we need to load the culture and currency dynamically for the NumericTextBox component. Kindly refer the below code example. 

  

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs'; 

import {DropDownListComponent} from "@syncfusion/ej2-react-dropdowns"; 

import React, { Component } from 'react'; 

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

import './App.css'; 

setCulture("he"); 

loadCultureFiles('he'); 

 var cultureData = [ 

    { Id: 'he', currency: 'ILS' }, 

    { Id: 'ja', currency: 'JPY' }, 

    { Id: 'fr', currency: 'EUR' } 

]; 

var currency = "ILS"; 

var numericInstance;  

var sharePrice = 12; 

var fields = { text: 'currency', value: 'Id' }; 

var value = "he"; 

var loadedCultures = ['he']; 

function onChange(args) { 

  if (loadedCultures.indexOf(args.value) === -1) { 

      loadedCultures.push(args.value); 

  } 

  setCulture(args.value); 

  numericInstance = document.getElementById("numeric").ej2_instances[0]; 

  numericInstance.currency = args.itemData.currency; 

} 

function loadCultureFiles(name, base) { 

  var files = [ 'numbers.json', 'currencies.json', 'timeZoneNames.json', 'currencyData.json']; 

  if (name === 'en-US') { 

      return; 

  } 

  let loadCulture = function (prop) { 

      let val, ajax;       

      if (prop === files.length - 1) { 

        ajax = new Ajax("./cldr-data/supplemental/" + files[prop], "GET", true);        

      }  

      else { 

        ajax = new Ajax("./cldr-data/main/" + name + '/' + files[prop], "GET", true); 

      } 

      ajax.send().then( 

        function (value) { 

          val = value; 

          console.log(val); 

           loadCldr(JSON.parse(val)); 

        }, 

        function (reason) { 

            console.log(reason); 

        }); 

 

  }; 

  for (let prop = 0; prop < files.length; prop++) { 

      loadCulture(prop); 

  } 

} 

 

class App extends Component { 

 

  render() { 

    return (<div><NumericTextBoxComponent  id="numeric"  currency={currency} format='c4' value={sharePrice} decimals={4} 

    validateDecimalOnType={true} floatLabelType="Always" placeholder="Share price" width="200px"/> 

 

<DropDownListComponent value={value} dataSource={cultureData} fields={fields} change={onChange} 

  floatLabelType="Always" placeholder="Currency" width="200px"/></div>); 

     

  }     

} 

 

export default App; 

  

For your convenience, we have prepared the sample and attached it below. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dynamic_culture_switch_164933-1823894311  

  

Regards, 

Berly B.C 

[Amos]

Thanks but it made several issues with the browser (Firefox simply threw an exception) that I don't even know where to begin.

Is there a simpler way to show currency symbols? Maybe using other methods?

If not, I will find another way to achieve what I need.

[Amos]

Eventually I used the following to show the currency on the floating label so it's good enough for me, thanks

export function getCurrencySymbol(currency) {
    return new Intl.NumberFormat('en', {style: 'currency', currency: currency}).formatToParts("1").find(part=>part.type="currency").value;
}

If somehow this can be used inside the editor itself in future versions, let me know because there is no need to install nor define anything,
it's built in

[Berly Christopher]

Hi Amos, 

  

Please let us know if you need further assistance on this.  

  

Regards, 

Berly B.C