Grid number field inline edit with step?

3 posts, 0 answers
  1. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 25 Oct 2012 Link to this post

    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. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 Oct 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 30 Oct 2012 Link to this post

    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.
Back to Top