TextBox - Client-side API

Set/Get values on client










Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?