New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms NumericTextBox Overview

Units:
Spin UpSpin Down


Price:


Discount:



Total:

Telerik RadNumericTextBox is an input control that accepts only numeric entries. It shares the common properties of all RadInput controls, including support for skins, styles for different states, empty message support, conditional postback on text change, flexible caret and button positioning, labels, and so on.

About RadNumericTextBox for ASP.NET AJAX

When you need data entry control that restricts the user to enter only numeric values, Telerik NumericTextBox control for ASP.NET AJAX is the perfect match. The control could be configured to use specific numeric type (currency, number, percent) and allow only a range of numeric values to be entered by the user.

RadNumericTextBox and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich client-side API
  • Keyboard and mouse wheel support.
  • The ability to add labels and buttons that are associated with the input control.
  • Formatting options based on Culture settings or your own detailed requirements
  • Empty message support.
  • Client/Server side data validation.
  • Advanced Skinning - The visual appearance of the Input control can be easily customized through skins

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        function pageLoad() {
            numericTextBox1 = $find("<%=RadNumericTextBox1.ClientID%>");
            numericTextBox2 = $find("<%=RadNumericTextBox2.ClientID%>");
            numericTextBox3 = $find("<%=RadNumericTextBox3.ClientID%>");
            resultTextBox = $find("<%=resultTextBox.ClientID%>");
        }
    </script>

    <div class="demo-containers">
        <div class="demo-container wrapper">
            <div class="demo-container demo-content">
                <asp:Label ID="Label1" runat="server" Text="Units:" Width="100px"></asp:Label>
                <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox1" Width="190px" Value="1" EmptyMessage="Enter units count" MinValue="0" ClientEvents-OnValueChanged="demo.valueChanged" ShowSpinButtons="true" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox><br />
                <br />
                <asp:Label ID="Label2" runat="server" Text="Price:" Width="100px"></asp:Label>
                <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox2" Width="190px" Value="10" EmptyMessage="Enter unit price" Type="Currency" MinValue="0" ClientEvents-OnValueChanged="demo.valueChanged"></telerik:RadNumericTextBox><br />
                <br />
                <asp:Label ID="Label3" runat="server" Text="Discount:" Width="100px"></asp:Label>
                <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox3" Width="190px" Value="15" EmptyMessage="Enter discount" Type="Percent" MinValue="0" MaxValue="100" ClientEvents-OnValueChanged="demo.valueChanged"></telerik:RadNumericTextBox><br />
                <br />
                <hr />
                <br />
                <asp:Label runat="server" Text="Total:" Width="100px"></asp:Label>
                <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="resultTextBox" Value="8.50" Type="Currency" Width="190px" ReadOnly="true" Enabled="false" DisabledStyle-BackColor="Transparent"></telerik:RadNumericTextBox>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance