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

Client-side API

  • Set/Get values on client









RadTextBox 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, CarretPosition 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:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Label="RadTextBox"
                    Width="100%" LabelWidth="95px">
                    <ClientEvents OnLoad="demo.load" />
                </telerik:RadTextBox>
            </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="RadTextBox2">Set/Get Value</label><br />
                            <qsf:TextBox ID="RadTextBox2" Text="Some text" runat="server" Width="216px"></qsf:TextBox><br />
                            <br />
                            <qsf:Button ID="Button1" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputValue('RadTextBox2');}"></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="ConfiguratorColumn2" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadTextBox3">Set/Get EmptyMessage</label><br />
                            <qsf:TextBox ID="RadTextBox3" Text="Some message" 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="ConfiguratorColumn3" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadTextBox4">Set/Get CaretPosition</label><br />
                            <qsf:NumericTextBox ID="RadTextBox4" runat="server" Value="3" 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.setCaretPosition('RadTextBox4');}"></qsf:Button>
                            <qsf:Button ID="Button4" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getCaretPosition();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadTextBox4">Methods</label><br />
                            <qsf:Button ID="Button9" runat="server" Text="Clear value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getTextBox().clear();}"></qsf:Button>
                            <qsf:Button ID="Button10" runat="server" Text="Select all" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getTextBox().selectAllText();}"></qsf:Button>
                            <br />
                            <br />
                            <qsf:Button ID="Button7" runat="server" Text="Enable" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getTextBox().enable();}"></qsf:Button>
                            <qsf:Button ID="Button8" runat="server" Text="Disable" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getTextBox().disable();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance