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

    NumericTextBox Basics

    General Settings

    Spin UpSpin Down

    Globalization Settings

    Numeric Settings

    • 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

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • styles.css
    <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.NumericTextBox.Basics.DefaultVB"  %>
     
    <%@ 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>
    </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 ID="ConfiguratorColumn1" 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="ConfiguratorColumn2" 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 ID="Label1" 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 ID="ConfiguratorColumn3" Size="Narrow" runat="server">
                        <ul class="fb-group">
                            <li>
                                <asp:Label ID="Label2" 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="Label3" 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="Label4" 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 ID="ConfiguratorColumn4" Size="Narrow" runat="server">
                        <ul class="fb-group">
                            <li>
                                <asp:Label ID="Label5" 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="Label12" 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