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

Client-side API

  • Set/Get values on client



  • Methods


RadNumericTextBox provides a flexible client-side API that allows you to easily interact with the control on the client.

In this demo you can examine how to use the client-side API to change or retrieve the Value, EmptyMessage, MaxValue of the control and to test some of the exposed methods in the API.

You can find more useful information and help in the provided related resources.

Related Resources

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

<%@ 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>
    <script src="scripts.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <div class="contentContainer">
                <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox1" runat="server" Label="NumericTextBox" EmptyMessage="Enter some value"
                    Width="100%" LabelWidth="125px" Type="Currency" Value="195">
                    <ClientEvents OnLoad="demo.load" />
                </telerik:RadNumericTextBox>
            </div>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Set/Get values on client">
        <Views>
            <qsf:View CssClass="customized-labels">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadNumericTextBox2">Set/Get Value</label><br />
                            <qsf:NumericTextBox ID="RadNumericTextBox2" runat="server" Width="216px"></qsf:NumericTextBox><br />
                            <br />
                            <qsf:Button ID="Button1" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputValue('RadNumericTextBox2');}"></qsf:Button>
                            <qsf:Button ID="Button5" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getInputValue();}"></qsf:Button>                            
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="NumericTextBox4">Set/Get MaxValue</label><br />
                            <qsf:NumericTextBox ID="NumericTextBox4" runat="server" Width="216px" NumberFormat-DecimalDigits="0"></qsf:NumericTextBox><br />
                            <br />
                            <qsf:Button ID="Button3" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setMaxValue('NumericTextBox4');}"></qsf:Button>
                            <qsf:Button ID="Button4" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getMaxValue();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadTextBox3">Set/Get EmptyMessage</label><br />
                            <qsf:TextBox ID="RadTextBox3" runat="server" Width="216px"></qsf:TextBox><br />
                            <br />
                            <qsf:Button ID="Button2" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setEmptyMessage('RadTextBox3');}"></qsf:Button>
                            <qsf:Button ID="Button6" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getEmptyMessage();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <span>Methods</span><br />
                            <qsf:Button ID="Button9" runat="server" Text="Clear value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getDemoInputControl().clear();}"></qsf:Button>
                            <qsf:Button ID="Button10" runat="server" Text="Select all" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getDemoInputControl().selectAllText();}"></qsf:Button>
                            <br />
                            <br />
                            <qsf:Button ID="Button7" runat="server" Text="Get Display Value" Width="106px" AutoPostBack="false" OnClientClicked="function(){alert('Display value: ' + demo.getDemoInputControl().get_displayValue());}"></qsf:Button>
                            <qsf:Button ID="Button8" runat="server" Text="Get Number Format" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.showNumberFormat();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance