Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Input / First Look

Configurator
Set Empty Message:
Set Max Length:
Selection On Focus:
select
Button Position:
select


  • RadTextBox is an input control that lets the user enter text. By default, the TextMode property of the control is set to InputMode.SingleLine, which displays a single-line text box. However, you can also use RadTextBox to display a multiline text box or a text box that masks user input by changing the value of the RadTextMode property to InputMode.MultiLine or InputMode.Password, respectively.

    The text displayed in RadTextBox is specified or determined by using the Text property. Additionally, the Skin property allows you to control the appearance.

    The display width of the text box (in characters) is specified by its Columns property. If RadTextBox is a multiline text box, the number of rows it displays is defined by the Rows property. To render text that wraps within the RadTextBox control, set the Wrap property to true.

    You can also specify how data is entered in RadTextBox by setting a few properties. To prevent the text from being modified, set the ReadOnly property to true. If you want to limit the user input to a specified number of characters, set the MaxLength property to the desired integer value.

    The purpose of the EmptyMessage is to provide more information for the user about the RadTextBox itself without cluttering up the rest of the page.

    You can choose whether to display the mouse cursor at the beginning/end of the input text or select the whole text when control gains focus. This is accomplished via the SelectionOnFocus property.

    The Label property lets you to add a label associated to the input control

    Finally, the ShowButton, ButtonsPosition, and ButtonCssClass properties let you add and configure buttons on the input control.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.InputExamplesCS.Input.Examples.RadTextBox.FirstLook.DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        
        <script type="text/javascript">
            function ValueChanged(sender, e) {
                var div = document.getElementById("div1");
                div.innerHTML =
                "ValueChanged (Client Event): OldValue=" + e.get_oldValue() + "; NewValue=" + e.get_newValue() + ";";
                e.set_cancel(true);
            }
            function ButtonClick(sender, e) {
                var radTextBox = sender;
                radTextBox.raisePostBackEvent();
            }
        </script>
        
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator" Expanded="true">
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
            <table>
                <tr>
                    <td>
                        Set Empty Message:
                    </td>
                    <td style="width: 168px">
                        <telerik:RadTextBox ID="RadTextBox4" runat="server" OnTextChanged="RadTextBox4_TextChanged"
                            AutoPostBack="True" />
                    </td>
                    <td colspan="2">
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide Label" Checked="true"
    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Set Max Length:
                    </td>
                    <td>
                        <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" OnTextChanged="RadNumericTextBox1_TextChanged"
                            AutoPostBack="True" NumberFormat-DecimalDigits="0" />
                    </td>
                    <td colspan="2">
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Show/Hide Button" AutoPostBack="true"
    OnCheckedChanged="CheckBox2_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Selection On Focus:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                            Width="128px">
                            <Items>
                                <telerik:RadComboBoxItem Value="None" />
                                <telerik:RadComboBoxItem Text="SelectAll" Value="SelectAll" />
                                <telerik:RadComboBoxItem Text="CaretToBeginning" Value="CaretToBeginning" />
                                <telerik:RadComboBoxItem Text="CaretToEnd" Value="CaretToEnd" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                    <td>
                        Button Position:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                            Width="128px">
                            <Items>
                                <telerik:RadComboBoxItem />
                                <telerik:RadComboBoxItem Text="Left" Value="Left" />
                                <telerik:RadComboBoxItem Text="Right" Value="Right" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <table width="100%">
            <tr>
                <td>
                    <telerik:RadTextBox Width="195px" ID="RadTextBox1" runat="server" Label="Single line: "
                        EmptyMessage="type here" InvalidStyleDuration="100" AutoPostBack="true" OnTextChanged="RadTextBox_TextChanged">
                        <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick" />
                    </telerik:RadTextBox>
                </td>
                <td>
                    <telerik:RadTextBox Width="195px" ID="RadTextBox2" runat="server" TextMode="MultiLine"
                        Label="Multi-line: " EmptyMessage="type here" AutoPostBack="true" OnTextChanged="RadTextBox_TextChanged">
                        <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick" />
                    </telerik:RadTextBox>
                </td>
                <td>
                    <telerik:RadTextBox Width="195px" ID="RadTextBox3" runat="server" TextMode="Password"
                        Label="Password: " EmptyMessage="type here" AutoPostBack="true" OnTextChanged="RadTextBox_TextChanged">
                        <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick" />
                    </telerik:RadTextBox>
                </td>
            </tr>
        </table>
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <div id="div1"></div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTextBox4">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadNumericTextBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadComboBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadTextBox3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadTextBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadTextBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadTextBox3">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="None">
        </telerik:RadAjaxLoadingPanel>
        <!-- content end -->
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451