[Solved] Grid number field inline edit with step?

[Sypher]

Is there a way to set the step for a number field in the grid or do I need to make a custom editor with a kendoNumericTextBox and put it in there? For example, my Commissions column is a percentage, and I would like the number to go from 0 to 1.0 with a step of .01.

var dsInvestments2 = new kendo.data.DataSource({

    transport: {

        read: "/api/investments",

        create: { url: "/api/investments", type: "POST" },

        update: {

            url: function (o) { return "/api/investments/" + o.ID; },

            type: "PUT"

        },

        destroy: {

            url: function (o) { return "/api/investments/" + o.ID; },

            type: "DELETE"

        }

    },

    group: [ { field: "AccountTypeName", dir: "desc" }, { field: "ProductName", dir: "desc" } ],

    schema: {

        model: {

            id: "ID",

            fields: {

                ID: { editable: false, nullable: false },

                AccountTypeID: { editable: true },

                AccountTypeName: { editable: false },

                ProductID: { validation: { required: true } },

                ProductName: { editable: false },

                Name: { validation: { required: true } },

                Commission: { validation: { required: true }, type: "number" }

            }

        }

    }

});

 

$("#investments").kendoGrid({

    sortable: true,

    scrollable: true,

    toolbar: [{ name: "create", text: "New" }],

    dataSource: dsInvestments2,

    columns: [

        { field: "AccountTypeID", title: "Account Type", template: "#=AccountTypeName#", editor: accountTypeEditor, hidden: true },

        { field: "AccountTypeName", title: "Account Type", hidden: true, groupHeaderTemplate: "${ value }" },

        { field: "ProductID", title: "Product", editor: productsEditor, template: "#=ProductName#", hidden: true },

        { field: "ProductName", title: "Product", hidden: true, groupHeaderTemplate: "${ value }" },

        { field: "Name", title: "Investment" },

        { field: "Commission", title: "Commission", format: "{0:p0}", width: 100, type: "number", step: 0.01 },

        { command: ["edit", "destroy"], title: " ", width: 200 }],

    editable: "inline"

});

[Vladimir Iliev]

Hi Bryan,

 
Basically you should use Custom editor for this column which contains NumericTextBox with needed configuration options. Please check the example below:

            { field: "UnitPrice", title:"Unit Price", width: "150px", editor: unitPriceEditor },
            { command: "destroy", title: " ", width: "110px" }],
        editable: true
    });
});

function unitPriceEditor(container, options){
    $('<input data-bind="value:UnitPrice" data-step="0.1"/>')
        .appendTo(container)
        .kendoNumericTextBox({});
}

 
Kind Regards,
Vladimir Iliev
the Telerik team

[Sypher]

Yeah, I figured as much. It seems silly to have to make custom editors everywhere when the columns have built-in editors that are so close to being useful, but at least the custom editors are usually fairly simple.