NumericTextBox Overview

The NumericTextBox converts an <input> element into a numeric, percentage, or currency textbox.

By default, the widget renders Spin buttons which increase or decrease the value with a predefined step.

Basic Usage

The NumericTextBox provides a set of default API configuration options which can be set during its initialization such as minimum and maximum values, incremental steps, and so on.

The following example demonstrates how to create a NumericTextBox and set some of its configuration options.

 <input id="textbox">

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

Initializing the NumericTextBox

Upon its initialization, the NumericTextBox wraps the <input> element with a <span> tag and renders its Spin buttons.

To get a reference to the NumericTextBox, always use id instead of a class selector. Behind the scenes, the NumericTextBox creates a secondary element that represents the visual look of the widget and copies all non-id attributes including the class. When you use the class for referencing the widget, this behavior causes unexpected results.

The following example demonstrates how to initialize the NumericTextBox.

<input id="textBox" />

<script>
    $(document).ready(function(){
        $("#textBox").kendoNumericTextBox();
    });
</script>

Functionality and Features

For more information on the known limitations of the NumericTextBox, refer to this article.

Events

For a complete example on the basic NumericTextBox events, refer to the demo on using the events of the NumericTextBox.

See Also

In this article
Not finding the help you need? Improve this article