Input

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

TextBox - First Look

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

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 TextMode 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.

The ShowButton, ButtonsPosition, and ButtonCssClass properties let you add and configure the buttons of the input control.


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

New: Since Q2 2013 RadTextBox when set to Multiline has new functionality - resizing. This functionality is controlled by the Resize property which options are: None, Vertical, Horizontal, and Both.

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

<%@ 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>ASP.NET Input Demo - First Look</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTextBox4">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadNumericTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ResizingDropDownList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="None">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <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, eventArgs)
            {
                var ajaxMgr = $find("<%= RadAjaxManager1.ClientID %>");
                 ajaxMgr.ajaxRequest(sender.get_id());
             }
        </script>
    </telerik:RadScriptBlock>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
        Expanded="true">
        <table>
            <tr>
                <td>Set Empty Message:
                </td>
                <td style="width: 168px">
                    <telerik:RadTextBox ID="RadTextBox4" runat="server" OnTextChanged="RadTextBox4_TextChanged"
                        AutoPostBack="True">
                    </telerik:RadTextBox>
                </td>
                <td colspan="2">
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide Label" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>Set Max Length:
                </td>
                <td>
                    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" OnTextChanged="RadNumericTextBox1_TextChanged"
                        AutoPostBack="True" NumberFormat-DecimalDigits="0">
                    </telerik:RadNumericTextBox>
                </td>
                <td colspan="2">
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Show/Hide Button" AutoPostBack="true"
                        OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                </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>
                            <telerik:RadComboBoxItem Text="SelectAll" Value="SelectAll"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="CaretToBeginning" Value="CaretToBeginning"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="CaretToEnd" Value="CaretToEnd"></telerik:RadComboBoxItem>
                        </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>
                            <telerik:RadComboBoxItem Text="Left" Value="Left"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Right" Value="Right"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>Resize mode:
                </td>
                <td>
                    <asp:DropDownList ID="ResizingDropDownList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ResizingDropDownList_SelectedIndexChanged">
                        <asp:ListItem Text="Both" Value="Both" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="None" Value="None"></asp:ListItem>
                        <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                        <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
    </qsf:ConfiguratorPanel>
    <table width="100%">
        <tr>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox2" runat="server" TextMode="MultiLine" Resize="Both"
                    Label="Multi-line: " EmptyMessage="type here" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox1" runat="server" Label="Single line: "
                    EmptyMessage="type here" InvalidStyleDuration="100" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox3" runat="server" TextMode="Password"
                    Label="Password: " EmptyMessage="type here" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
        </tr>
    </table>
    <br />
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <div id="div1">
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here