Search code examples
javascriptjquerykendo-uikendo-grid

Handle currency format in grid columns value

I'm trying to handle some currency values in my grid (us dollar, euro, etc.) I find a way to set it up into my grid, using grid column template for now I have these formats

  1. $0,000.00
  2. ¥0,000.00

And I'm storing some number values on my database then, when I'm drawing my Kendo Grid I'm doing something like this:

let format = c.someFormat; // => $0,000.00, etc.
let grid = '# if (' + columnName + ') { ##=kendo.toString(' + columnName + ', "' + format + '")## } else { "" } #';
c.template = grid ;

This code seems to be working when number is greater than 999.00, is not is showing something like this: Ex. using 10.22

$0,010.22

So my question is, what can I do to keep the greater than 999 functionality but adding support for minor numbers and show 10.22 as $10.22

Here is a dojo

Solution

  • Use # instead of 0 in your mask:

    ¥#,##0.00

    Updated Dojo and demo below:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
  
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/cultures/kendo.culture.de-DE.min.js"></script>
<script>
  // Format a number using custom number formats
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(kendo.toString(0.22, "¥#,##0.00")); // "0019"
  console.log(kendo.toString(1.22, "¥#,##0.00")); // "0019"
  console.log(kendo.toString(10.22, "¥#,##0.00")); // "0019"
  console.log(kendo.toString(123.45, "¥#,##0.00")); // "0019"
  console.log(kendo.toString(1234.56, "¥#,##0.00")); // "0019"
  console.log(kendo.toString(1234567.89, "¥#,##0.00")); // "0019"


</script>
</body>
</html>