Demos Back to Docs

International Currency Formatting

58 of 124
You can automatically format your currency to the corresponding language default defined on the page.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 554px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="USD (en) Currency">
    <zg-data data='[{"usd":1135,"other":1895},{"usd":23894,"other":5732},{"usd":613421,"other":120984}]'></zg-data>
    <zg-column type="currency" index="usd" header="USD (no type-currency defined)"></zg-column>
    <!-- can define USD number formatting with European currency symbol -->
    <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
  </zing-grid>

  <zing-grid caption="German (de) Currency" lang="de">
    <zg-data data='[{"de":1135,"other":1895},{"de":23894,"other":5732},{"de":613421,"other":120984}]'></zg-data>
    <!-- numbers formatted to german (de) ISO -->
    <zg-column type="currency" index="de" header="Euro (no type-currency defined)"></zg-column>
    <!-- still need to define type-currency to get the proper currency symbol -->
    <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
   <zing-grid caption="USD (en) Currency">
      <zg-data data='[{"usd":1135,"other":1895},{"usd":23894,"other":5732},{"usd":613421,"other":120984}]'></zg-data>
     <zg-column type="currency" index="usd" header="USD (no type-currency defined)"></zg-column>
     <!-- can define USD number formatting with European currency symbol -->
     <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
    </zing-grid>
    
    <zing-grid caption="German (de) Currency" lang="de">
      <zg-data data='[{"de":1135,"other":1895},{"de":23894,"other":5732},{"de":613421,"other":120984}]'></zg-data>
     	<!-- numbers formatted to german (de) ISO -->
      <zg-column type="currency" index="de" header="Euro (no type-currency defined)"></zg-column>
      <!-- still need to define type-currency to get the proper currency symbol -->
     <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}
// No JS code

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery