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

NumericTextBox Basics

General Settings

Spin UpSpin Down

Globalization Settings

Spin UpSpin Down

Numeric Settings

Spin UpSpin Down
  • Demo Configurator
  • General Settings
  • Globalization Settings
  • Numeric Settings
  • Empty message
  • Show SpinButtons
  • Show Label
  • Keyboard increment
  • Mouse wheel increment
  • SpecificCultures
    English (United States)
  • Type
    Currency
  • DecimalDigits:
    1
  • DecimalSeparator:
    .
  • GroupSeparator:
  • GroupSizes
    3
  • NegativePattern
    $ -n
  • PositivePattern
    $ n

The following example demonstrates some of the main properties and functionalities of the RadNumericTextBox control. The code shows how to dynamically set the visibility of the spin buttons, keyboard and mouse wheel incrementation of the numeric textbox value.

Furthermore, the code demonstrates how to set the Culture, Decimal digits and separators properties of the RadNumericTextBox.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.NumericTextBox.Basics.DefaultCS"  %>

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="demoContainer" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-containers" id="demoContainer" runat="server">
        <div class="demo-container">
            <h4>General Settings</h4>
            <telerik:RadNumericTextBox RenderMode="Lightweight" ShowSpinButtons="true" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true" 
                Label="NumericTextBox" LabelWidth="130px" runat="server" ID="Numeric1" Width="250px">
            </telerik:RadNumericTextBox>
        </div>
        <div class="demo-container">
            <h4>Globalization Settings</h4>
            <telerik:RadNumericTextBox RenderMode="Lightweight" ShowSpinButtons="True" Value="523.123" Type="Currency" Width="250px" ID="RadNumericTextBox1" runat="server" InvalidStyleDuration="100">
                <NumberFormat AllowRounding="True" KeepNotRoundedValue="False"></NumberFormat>
            </telerik:RadNumericTextBox>
        </div>
        <div class="demo-container">
            <h4>Numeric Settings</h4>
            <telerik:RadNumericTextBox RenderMode="Lightweight" ShowSpinButtons="True" Value="25666.65" Type="Currency" ID="RadNumericTextBox3" runat="server" InvalidStyleDuration="100" Width="250px">
                <NumberFormat AllowRounding="True" KeepNotRoundedValue="False"></NumberFormat>
            </telerik:RadNumericTextBox>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View Title="General Settings">
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                    <li>
                        <asp:Label ID="Label7" Text="Empty message" runat="server" />
                        <qsf:TextBox runat="server" ID="EmptyMessage" AutoPostBack="true" Text="Set empty message" OnTextChanged="EmptyMessage_TextChanged">
                        </qsf:TextBox>
                    </li>
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox runat="server" ID="ShowSpinButtons" Checked="true" AutoPostBack="true" OnCheckedChanged="ShowSpinButtons_CheckedChanged"></asp:CheckBox>
                        </span>
                        <asp:Label ID="Label8" Text="Show SpinButtons" runat="server" />
                    </li>
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox runat="server" ID="ShowLabel" Checked="true" AutoPostBack="true" OnCheckedChanged="ShowLabel_CheckedChanged"></asp:CheckBox>
                        </span>
                        <asp:Label ID="Label9" Text="Show Label" runat="server" />
                    </li>
                </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title=" ">
                    <ul class="fb-group">
                        <li>
                        <span class="checkbox">
                            <asp:CheckBox runat="server" ID="KeyboardIncrement" Checked="true" AutoPostBack="true" OnCheckedChanged="KeyboardIncrement_CheckedChanged"></asp:CheckBox>
                        </span>
                            <asp:Label ID="Label10" Text="Keyboard increment" runat="server" />
                    </li>
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox runat="server" ID="MouseWheel" Checked="true" AutoPostBack="true" OnCheckedChanged="MouseWheel_CheckedChanged"></asp:CheckBox>
                        </span>
                        <asp:Label ID="Label11" Text="Mouse wheel increment" runat="server" />
                    </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                
            </qsf:View>
            <qsf:View Title="Globalization Settings">
                <ul class="fb-group">
                    <li>
                        <asp:Label Text="SpecificCultures" Width="150px" runat="server" />
                        <qsf:DropDownList OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" DropDownHeight="400px" AutoPostBack="true" ID="DropDownList1" runat="server" Width="205">
                            <Items>
                                <telerik:DropDownListItem Value="en-US" Selected="True" Text="English (United States)"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="de-DE" Text="German (Germany)"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="bg-BG" Text="Bulgarian (Bulgaria)"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <asp:Label ID="Label6" Text="Type" Width="150px" runat="server" />
                        <qsf:DropDownList OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" AutoPostBack="true" ID="DropDownList2" runat="server" Width="205">
                            <Items>
                                <telerik:DropDownListItem Text="Number" Value="Number"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Selected="True" Text="Currency" Value="Currency"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="Percent" Value="Percent"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Numeric Settings">
                <qsf:ConfiguratorColumn Size="Narrow" runat="server">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="Label1" Text="DecimalDigits:" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList31" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Value="0" Text="0"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Selected="True" Text="1" Value="1"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2" Text="2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="5" Text="5"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="Label2" Text="DecimalSeparator:" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList32" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Selected="True" Value="." Text="."></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="," Text=","></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="Label3" Text="GroupSeparator:" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList33" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Selected="True" Value=" " Text=" "></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="," Text=","></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn Size="Narrow" runat="server">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="Label4" Text="GroupSizes" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList34" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Value="2" Text="2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Selected="True" Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="Label5" Text="NegativePattern" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList35" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Selected="True" Value="$ -n" Text="$ -n"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BGN -n" Text="BGN -n"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="-n JPY" Text="-n JPY"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="-n km" Text="-n km"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="n- kg" Text="n- kg"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="-n %" Text="-n %"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="Label14" Text="PositivePattern" Width="140px" runat="server" />
                            <qsf:DropDownList OnSelectedIndexChanged="SelectedIndexChanged" Width="150px" AutoPostBack="true" ID="DropDownList36" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Selected="True" Value="$ n" Text="$ n"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BGN n" Text="BGN n"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="n JPY" Text="n JPY"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="n km" Text="n km"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="n kg" Text="n kg"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="n %" Text="n %"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance