Kendo Grid numbers truncate to 2 decimal places. How to make it respect what the user entered?

Question

In this Kendo Grid demo, if you edit the numbers under "Units in Stock" and add multiple decimals (try 2.203848), it'll truncate it to 2.20. It looks like that's the default behavior.

And I know that we can specify the decimal format with {0:n4}, for example.

But what if the number of decimals is unknown or can vary? Is there any way to make the grid use the exact number that the user enters?

Answer 1

To make this work in a grid, you need to use a custom editor. Set the number of decimals to a high enough number and make sure your field format has enough places. This great answer here tweaked a bit solves your problem.

function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
        .appendTo(container)
        .kendoNumericTextBox({
            decimals: 8,
            step    : 0.01
        });
}

$("#grid").kendoGrid({
    dataSource: dataSource,
    navigatable: true,
    pageable: true,
    height: 550,
    toolbar: ["create", "save", "cancel"],
    columns: [
        "ProductName",
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
        { field: "UnitsInStock", title: "Units In Stock", format: "{0:0.#########}", width: 120, editor: numberEditor },
        { field: "Discontinued", width: 120 },
        { command: "destroy", title: "&nbsp;", width: 150 }],
    editable: true
});

});