Search code examples
javascriptjquerykendo-uikendonumerictextboxeditablegrid

How to set the decimal places of a number in Kendo UI model defenition?


I'm using a kendo ui editable grid with NumericTextBox. Usually in NumericTextBox the decimal places are limited to two i.e, if I enter 10.135 the value will be formatted to 10.14. But what I need is to get 10.135 itself. What is to be done here.

My model definition.

var GridViewModel = new kendo.data.Model.define({
    fields: {
        Name: { type: "string", editable: false },
        Weight: { type: "number", editable: true, validation: { required: true } },
    }
});

and in my view model I have set the Grid as.

$("#DryingBinItemsAddedGrid").kendoGrid({
        dataSource: {
             data: DataDetails,
             schema: {
                model: GridViewModel 
             },
        },
        editable: true,
        dataBound: function () {

        },
        columns: [
               {
                   field: "Name",
                   title: "Name"
               },
               {
                   field: "Weight",
                   title: "Total Weight"
               }
        ]
   });

I have not mentioned my failed attempts in this example. Currently my Weight field is a numeric text box with two fields. What is to be done here to make my Weight field a NumericTextBox with 3 decimal point.


Solution

  • In order to control the configuration of the NumericTextBox used by the grid as the editor, you need to implement a custom editor, otherwise, the default configuration for the NumericTextBox will be used(which is 2 decimal places).

    Try changing your "Weight" column definition to:

    {
        field: "Weight",
        title: "Total Weight",
        editor: weightEditor
    }
    

    and add a weightEditor function that implements the custom editor:

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

    Demo: http://dojo.telerik.com/@Stephen/uviLO