I want to use a numeric only field on one of my table input cells.

[Guillermo]

But I don't want to use the the k-numerictextbox I just want a normal Textfield that only accepts numeric values without decimal points. Is there any way to accep numeric values besides using type: "number". What my team doesn't want is to use the little increase/decrease buttons.

Also how do I add a pocentage at the end of the value?

Here is the code I have so far

dataSource = new kendo.data.DataSource({
        data: [],
        schema: {
            model: {
                fields: {
                    ServiceItem: { editable: true, nullable: false, defaultValue: { ShortDescription: "Please select", Rate: "N/A", UnitOfMeasure: "N/A" } },
                    UnitPrice: { editable: false, validation: { required: true } },
                    Quantity: { editable: true, type: "number",validation: { required: true, min: 1 } },
                    UnitOfMeasure: { editable: false, nullable: true },
                    Discount: { editable: true,type: "number", validation: { min: 0, max: 100, required: true } },
                    Total: { type: "number", editable: false, validation: { min: 0, required: true } }
                }
            }
        },
        aggregate: [{ field: "Total", aggregate: "sum" }]
                    
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        toolbar: ["create"],
        scrollable: false,
        batch: true,
        columns: [
            {
                field: "ServiceItem", title: "Service/Items", editor: serviceItemDropDownEditor, template: "#= ServiceItem.ShortDescription# \u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].ServiceType.Id\u0027 value=\u0027#= ServiceItem.Id #\u0027 /\u003e" +
                  "    \u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].ShortDescription\u0027 value=\u0027#= ServiceItem.ShortDescription #\u0027 /\u003e" +
                  "    \u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].Description\u0027 value=\u0027#= ServiceItem.Description #\u0027 /\u003e"
            },
            { field: "UnitPrice", title: "Unit price", format: "{0:c}", width: "150px", template: "#= ServiceItem.Rate# \u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].Rate\u0027 value=\u0027#= ServiceItem.Rate #\u0027 /\u003e" },
            { field: "Quantity", title: "Quantity",format: "{0:c}", width: "150px", template: " #= Quantity #\u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].Quantity\u0027 value=\u0027#= Quantity #\u0027 /\u003e" },
            { field: "UnitOfMeasure", title: "Unit of measure", width: "100px", template: "#=ServiceItem.UnitOfMeasure #\u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].UnitOfMeasure\u0027 value=\u0027#= ServiceItem.UnitOfMeasure #\u0027 /\u003e" },
            { field: "Discount", title: "Discount", width: "100px" },
            { field: "Total", title: "Total", width: "100px", template: "#= (ServiceItem.Rate * Quantity) - ((ServiceItem.Rate * Quantity) * (Discount/100))#  \u003cinput type=\u0027hidden\u0027 name=\u0027Details[#= index(data)#].Total\u0027 value=\u0027#= ServiceItem.Rate * Quantity - Discount#\u0027 /\u003e" },
            { command: ["delete"], title: "&nbsp", width: "100px" }],
        editable: {
            confirmation: "Are you sure you want to delete this item?",
            mode: "incell",
            template: null,
            createAt: "bottom"
        },
        save: function (data) {
            if (data.values.ServiceItem)
                data.model.Total = (data.values.ServiceItem.Rate * data.model.Quantity) - ((data.values.ServiceItem.Rate * data.model.Quantity) * (data.model.Discount / 100));
            else if(data.values.Quantity)
                data.model.Total = (data.model.ServiceItem.Rate * data.values.Quantity) - ((data.model.ServiceItem.Rate * data.values.Quantity) * (data.model.Discount/100));
            else if (data.values.Discount)
                data.model.Total =  (data.model.ServiceItem.Rate * data.model.Quantity) - ((data.model.ServiceItem.Rate * data.model.Quantity) * (data.values.Discount/100));
            this.refresh();
        }
    });


Thank you

[Dimiter Madjarov]

Hi Guillermo,


To achieve this, you should specify a custom editor template for the column in which you should initialize a kendoNumericTextBox with the spinners option disabled.
E.g.

{ field: "UnitsInStock", title: "Units In Stock", editor: editNumberWithoutSpinners }

function editNumberWithoutSpinners(container, options) {
    $('<input data-text-field="' + options.field + '" ' +
            'data-value-field="' + options.field + '" ' +
            'data-bind="value:' + options.field + '" ' +
            'data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoNumericTextBox({
                spinners : false
            });
}

To display the number as a percentage, you could specify a custom format as described in the Documentation.

 

Greetings,
Dimiter Madjarov
the Telerik team

[Guillermo]

Thank you for your reply =)

[tharindu]

Can you give me the above syntax in 'razor'. It is harder to find similar syntax in razor for given answer.

[Dimiter Madjarov]

Hi Tharindu,


By convention the MVC editor templates are in the Views/Shared/EditorTemplates folder. You could check the Kendo.MVC.Examples solution for some predefined ones.
E.g. Integer.cshtml

@model int?

@(Html.Kendo().IntegerTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Min(int.MinValue)
      .Max(int.MaxValue)
)

In order to turn off the spinners, you should include the .Spinners(false) option to the specified editor template.

Let me know if this information was helpful.

Regards,
Dimiter Madjarov
Telerik