How to have a numeric text box for editing a cell in a Kendo UI grid?

Question

Looking at the Kendo UI grid demos (ASP.NET MVC CSHTML flavor), when editing a cell that is bound to an numeric value, the input becomes a numerictextbox, but I can't seem to reproduce that behavior (on my side in stays a plain input). There must be something that assigns it the data-role attribute or something, but what is it ?

Thanks,

Answer 1

In order to use the model binding and have Kendo automatically assign the respective control, you need to setup a MVC editor template (http://coding-in.net/asp-net-mvc-3-how-to-use-editortemplates/) , i.e. Views/Shared/EditorTemplates. e.g. to render a Kendo NumericTextBox, create an editor template along these lines:

@model int
@(Html.Kendo().NumericTextBox())

Answer 2

Define the field type as numeric in the schema.

Example: Check UnitPrice or UnitsInStock

schema: {
    model: {
        id: "ProductID",
        fields: {
        ProductID: { editable: false, nullable: true },
        ProductName: { validation: { required: true } },
        UnitPrice: { type: "number", validation: { required: true, min: 1} },
        Discontinued: { type: "boolean" },
        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
        }
    }
}

Answer 3

Kendo provides some templates under shared/EditorTemplates => here is Integer.cshtml template is ther. we can use that to show numeric value in a column. We need to set the EditorTemplateName property on column of the Grid.

EditorTemplateName("Integer") on column.Bound for that column.