Kendo grid number formatting as percentage issue

Question

I am displaying numeric value formatted as percentage using the following:

columns.push(
            {
                field: key,
                hidden: false,
                format: "{0:p2}"
            });

When the field is supposed to display 1.00% it's displaying 100.00% like wise any given value it's adding zeros, one more value is 65.37% and output is 6,537.00%

Any settings that I am missing or anything wrong with the format? The problem is I am creating grid dynamically and hence I can't show the full grid setup.

In the above you can see I am pushing columns which is an array which will be passed to the function which creates grid.

Answer 1

Please try with the below code snippet.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        dataSource: {
            data: [
              { id: 1, increase: 1.00 },
              { id: 1, increase: 65.37 }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        increase: { type: "number" }
                    }
                }
            }
        },
        columns: [
          { field: "id" },
          {
              field: "increase",
              template: '#=kendo.format("{0:p}", increase / 100)#'
          }
        ]
    });

</script>

Let me know if any concern.