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

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

4 Answers 781 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Guillermo
Top achievements
Rank 1
Guillermo asked on 05 Apr 2013, 09:30 PM
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

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 08 Apr 2013, 01:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Guillermo
Top achievements
Rank 1
answered on 09 Apr 2013, 02:16 AM
Thank you for your reply =)
0
tharindu
Top achievements
Rank 1
answered on 02 Apr 2014, 05:23 PM
Can you give me the above syntax in 'razor'. It is harder to find similar syntax in razor for given answer.
0
Dimiter Madjarov
Telerik team
answered on 04 Apr 2014, 08:25 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Guillermo
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Guillermo
Top achievements
Rank 1
tharindu
Top achievements
Rank 1
Share this question
or