Telerik UI for Windows 8 HTML

The RadNumericBox for Windows 8 is an HTML/JavaScript component that allows the user to choose a numeric value (numeric, percentage or currency) either by typing it manually in the input provided by the component or by using the increment/decrement spin buttons.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a RadNumericBox

To create a RadNumericBox in the HTML markup, add an empty span or div element with a data-win-control attribute with a value of Telerik.UI.RadNumericBox:

HTML Copy imageCopy
<span data-win-control="Telerik.UI.RadNumericBox">
</span>

Alternatively, you can create a RadNumericBox programmatically through JavaScript by first defining a span element with an id set and then passing it as a first argument to the NumericBox constructor:

HTML Copy imageCopy
<span id="myNumericBox">
</span>
JavaScript Copy imageCopy
var numericBox = new Telerik.UI.RadNumericBox(document.getElementById("myNumericBox"));

Defining RadNumericBox without setting any properties will result in the default RadNumericBox setup. The number is limited to two digits after the floating point and the increment/decrement step of the control is 1. Here is an image of the RadNumericBox.

numericbox-gettingstarted

Setting RadNumericBox Options

Just like any other Windows Runtime JavaScript control, the RadNumericBox options can be defined through the data-win-options attribute:

HTML Copy imageCopy
<!-- Define a currency type numeric box with 2 digits precision. -->
                            <span data-win-control="Telerik.UI.RadNumericBox" data-win-options="{format:'c2'}">
                            </span>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

JavaScript Copy imageCopy
// Define a currency type numeric box with 2 digits precision.
var numericBox = new Telerik.UI.RadNumericBox(document.getElementById("myNumericBox"), { format: "c2" });

To see all available configuration options in the API, go to RadNumericBox.

Accessing and Modifying RadNumericBox

You can get ahold of the RadNumericBox object the same way as the native WinJS components: find its DOM element and access its winControl property.

JavaScript Copy imageCopy
var numericBox = document.getElementById("myNumericBox").winControl;

Once you have a reference to the control, you can modify its properties as required:

JavaScript Copy imageCopy
numericBox.decimals = 3;

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches.

Assigning Event Handler Function During Initialization Copy imageCopy
var numericBox = new Telerik.UI.RadNumericBox(document.getElementById("myNumericBox"), {
    onspin: spinHandlerFnName 
});
// OR
var numericBox = new Telerik.UI.RadNumericBox(document.getElementById("myNumericBox"), {
    onspin: function(e) {//...}
});
Note

If you attach the event handler in the HTML mark-up, you need to mark the handler function as safe in your code using the WinJS.Utilities.markSupportedForProcessing function.

Using addEventListener Method Copy imageCopy
numericBox.addEventListener("spin", spinHandlerFnName);

See Also

Other Resources

Formatting numbers in RadNumericBox