Getting Started with the NumericTextBox
This guide demonstrates how to get up and running with the Kendo UI for jQuery NumericTextBox.
After the completion of this guide, you will be able to achieve the following end result:
<input id="numeric-textbox" />
<script>
$("#numeric-textbox").kendoNumericTextBox({
value: 50,
format: "c2"
});
</script>
1. Create an input Element
First, create an <input> element on the page that will be used to initialize the widget.
<input id="numeric-textbox" />
2. Initialize the NumericTextBox
In this step, you will initialize the NumericTextBox from the <input> element. Upon its initialization, the NumericTextBox wraps the <input> element with a <span> tag and renders its Spin buttons.
<input id="numeric-textbox" />
<script>
// Target the input element by using jQuery and then call the kendoNumericTextBox() method.
$("#numeric-textbox").kendoNumericTextBox({
// Add some basic configurations such as a default value.
value: 50
});
</script>
3. Format the Displayed Value
The NumericTextBox supports a variety of configurations. For a full list of all available options, visit the NumericTextBox API Documentation.
To apply a format to the rendered value, use the format configuration.
<input id="numeric-textbox" />
<script>
$("#numeric-textbox").kendoNumericTextBox({
format: "c2" // The value will be formatted as a currency value with two decimal symbols.
});
</script>
4. Reference Existing NumericTextBox Instances
You can now refer to the NumericTextBox instance and build on top of its existing configurations in the following way:
- Use the
jQuery.data()method. -
Once a reference is established, use the NumericTextBox API to control its behavior.
var numerictextbox = $("#numeric-textbox").data("kendoNumericTextBox");
To get a reference to the NumericTextBox, always use
idinstead 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-idattributes including the class. When you use the class for referencing the widget, this behavior causes unexpected results.