How to stop Kendo UI grid column format from rounding up

Question

I have a Kendo UI Grid that rounds up cents (and probably dollars) when formatting the column and don't know how to stop it from happening, just say I have 123.456 being returned from the database, and when I format the column to two decimal points it rounds up the cents amount and comes back as 123.46, if format to 3 decimal points then it doesn't round up.

In short I need the format the column to two decimal points without having the numbers round up and don't know how

let ds = [{
  id: 1,
  name: "Jane",
  Amount: 252.6563
}];

(function() {
  LoadTopGrid();
})();

function LoadTopGrid() {
  $('#grid').kendoGrid({
    dataSource: {
      data: ds,
      schema: {
        model: {
          id: "id",
          fields: {
            id: {
              editable: false,
              type: "number"
            },
            name: {
              type: "string"
            },
            Amount: {
              type: "number"
            }
          }
        }
      }
    },
    columns: [{
        field: "id",
        title: "ID",
        width: "50px"
      },
      {
        field: "name",
        title: "First",
        width: "150px"
      },
      {
        field: "Amount",
        title: "Amount",
        width: "150px",
        format: "{0:n2}"
      }
    ],
    selectable: "row",
    change: function(e) {
      console.log("I changed!");
    },
    height: 300
  });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>

<div id="grid"></div>

Long Le Long Le · Accepted Answer · 2020-01-13T07:35:16

I think you have to use template like this:

template: "#=kendo.toString(Math.trunc(Amount * 100) / 100, 'n2')#"

I tried it in dojo and it works well.

How to stop Kendo UI grid column format from rounding up

1 Answers