This is a migrated thread and some comments may be shown as answers.

Grid number field inline edit with step?

2 Answers 629 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sypher
Top achievements
Rank 1
Sypher asked on 25 Oct 2012, 05:35 PM
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"
});

2 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 Oct 2012, 03:51 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sypher
Top achievements
Rank 1
answered on 30 Oct 2012, 04:50 PM
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.
Tags
Grid
Asked by
Sypher
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Sypher
Top achievements
Rank 1
Share this question
or