dmathisen dmathisen - 3 months ago 23
Javascript Question

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

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

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
});

});