NumericTextBox Overview

The NumericTextBox widget can convert an INPUT element into a numeric, percentage or currency textbox. The type is defined depending on the specified format. The widget renders spin buttons and with their help you can increment/decrement the value with a predefined step. The NumericTextBox widget accepts only numeric entries. The widget uses kendo.culture.current culture in order to determine number precision and other culture specific properties.

Getting Started

Creating a NumericTextBox from existing INPUT element

<input id="textBox" />

NumericTextBox initialization

$(document).ready(function(){
    $("#textBox").kendoNumericTextBox();
});

Configuring NumericTextBox behaviors

The NumericTextBox provides configuration options that can be easily set during initialization. Among the properties that can be controlled:

• Value of the NumericTextBox
• Minimum and/or maximum values
• Increment step
• Precision of the number
• Number format (any valid number format is allowed)

To see a full list of available properties and values, review the Slider Configuration API documentation tab.

Customizing NumericTextBox defaults

 $("#textbox").kendoNumericTextBox({
     value: 10,
     min: -10,
     max: 100,
     step: 0.75,
     format: "n",
     decimals: 3
 });

Create Currency NumericTextBox widget

 $("#textbox").kendoNumericTextBox({
     format: "c2" //Define currency type and 2 digits precision
 });

Create Percentage NumericTextBox widget

 $("#textbox").kendoNumericTextBox({
     format: "p",
     value: 0.15 // 15 %
 });

Support for label element

Because of the complex rendering of the widget, focusing of the widget using label element will require additional implementation. Check this jsFiddle demo, which shows how to achieve this.

Accessing an Existing NumericTextBox

You can reference an existing NumericTextBox instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing NumericTextBox instance

var numericTextBox = $("#numericTextBox").data("kendoNumericTextBox");