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.

RadInput - Telerik's ASP.NET Input











tlrk.it/18uT6oP To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/18uT6oP

About RadInput for ASP.NET AJAX

When you need versatile data entry controls combined with strict validation, Telerik Input control for ASP.NET AJAX is the perfect match. Encapsulating four highly configurable controls(RadTextBox, RadNumericTextBox, RadMaskedTextBox and RadDateInput), RadInput allows you to enter particular type of value and automatically restrict the values users can enter to that type. The big benefit with this control is that it can significantly reduces the overall download size of the HTML, no matter how many input controls you might have on a page.

RadInput and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Input demo, you can use the following path to find it in the sample website application:
input/examples/overview

Key Features

  • Rich client-side API
  • Keyboard and mouse wheel support.
  • The ability to add labels and buttons that are associated with the input control.
  • Empty message support.
  • Client/Server side data validation.
  • Advanced Skinning - The visual appearance of the Input control can be easily customized through skins

Resources

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Input/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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 AJAX Input Examples | RadInput component</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:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadInputManager ID="RadInputManager1" runat="server">
                <telerik:TextBoxSetting BehaviorID="PassWordValidation"
                    Validation-ValidationGroup="Group2" Validation-IsRequired="true">
                    <TargetControls>
                        <telerik:TargetInput ControlID="PassWordLogin"></telerik:TargetInput>
                    </TargetControls>
                </telerik:TextBoxSetting>
                <telerik:RegExpTextBoxSetting BehaviorID="EmailLogin" ErrorMessage="Please, provide a valid e-mail address!"
                    Validation-ValidationGroup="Group2" ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$">
                    <TargetControls>
                        <telerik:TargetInput ControlID="EmailLogin"></telerik:TargetInput>
                    </TargetControls>
                </telerik:RegExpTextBoxSetting>
            </telerik:RadInputManager>
            <table border="0" cellpadding="5">
                <colgroup>
                    <col width="100"/>
                    <col width="200"/>
                    <col width="100"/>
                    <col width="200"/>
                </colgroup>
                <thead>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="TitleLabel1" runat="server" AssociatedControlID="RadMaskedTextBox1"
                                Text="Registration form"></asp:Label>
                        </td>
                        <td colspan="2">
                            <asp:Label ID="TitleLabel2" runat="server" AssociatedControlID="RadMaskedTextBox1"
                                Text="Login form"></asp:Label>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="FormContainer">
                        <td>
                            <asp:Label ID="Label1" runat="server" AssociatedControlID="RadTextBox1" Text="Name:"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox1" runat="server" ValidationGroup="Group1">
                            </telerik:RadTextBox>
                            <br/>
                            <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" ControlToValidate="RadTextBox1" ErrorMessage="Please, supply a name!"
                                CssClass="Validator"></asp:RequiredFieldValidator>
                        </td>
                        <td>
                            <asp:Label ID="Label6" runat="server" AssociatedControlID="EmailLogin" Text="Email:"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="EmailLogin" runat="server" ValidationGroup="Group2">
                            </asp:TextBox>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td>
                            <asp:Label ID="Label2" runat="server" AssociatedControlID="RadNumericTextBox1" Text="Age:"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Type="Number" NumberFormat-DecimalDigits="0"
                                ValidationGroup="Group1">
                            </telerik:RadNumericTextBox>
                            <br/>
                            <asp:RequiredFieldValidator ID="NumercTextBoxRequiredFieldValidator" runat="server"
                                ValidationGroup="Group1" CssClass="Validator" Display="Dynamic" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Please, enter age!"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="NumericTextBoxRangeValidator" runat="server" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Year number should be a non negative less than 50." Display="Dynamic"
                                ValidationGroup="Group1" MaximumValue="50" MinimumValue="0" Type="Double" CssClass="Validator"></asp:RangeValidator>
                        </td>
                        <td>
                            <asp:Label ID="Label7" runat="server" AssociatedControlID="PassWordLogin" Text="Password:"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="PassWordLogin" runat="server" TextMode="Password" ValidationGroup="Group2">
                            </asp:TextBox>
                            <br/>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td valign="top">
                            <asp:Label ID="Label3" runat="server" AssociatedControlID="RadMaskedTextBox1" Text="Phone:"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Mask="(###)-######"
                                ValidationGroup="Group1">
                            </telerik:RadMaskedTextBox>
                            <br/>
                            <asp:RequiredFieldValidator Display="Dynamic" ID="MaskedTextBoxRequiredFieldValidator"
                                ValidationGroup="Group1" CssClass="Validator" runat="server" ErrorMessage="Please, enter a phone number."
                                ControlToValidate="RadMaskedTextBox1"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator Display="Dynamic" ID="MaskedTextBoxRegularExpressionValidator"
                                ValidationGroup="Group1" runat="server" ErrorMessage="Format is (###)-######"
                                ControlToValidate="RadMaskedTextBox1" CssClass="Validator" ValidationExpression="\(\d{3}\)-\d{6}"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td valign="top">
                            <asp:Label ID="Label4" runat="server" AssociatedControlID="Radtextbox2" Text="Email:"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadTextBox ID="Radtextbox2" runat="server" ValidationGroup="Group1">
                            </telerik:RadTextBox>
                            <br/>
                            <asp:RegularExpressionValidator ID="emailValidator" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" CssClass="Validator" ErrorMessage="Please, enter valid e-mail address."
                                ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                                ControlToValidate="Radtextbox2">
                            </asp:RegularExpressionValidator>
                            <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" CssClass="Validator" ControlToValidate="Radtextbox2"
                                ErrorMessage="Please, enter an e-mail!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td>
                            <asp:Label ID="Label5" runat="server" AssociatedControlID="RadDateInput1" Text="Hire&nbsp;Date:"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadDateInput ID="RadDateInput1" runat="server" DateFormat="d" MinDate="01/01/1990"
                                ValidationGroup="Group1" MaxDate="01/01/3000">
                            </telerik:RadDateInput>
                            <br/>
                            <asp:RangeValidator ID="DateInputRangeValidator" runat="server" ControlToValidate="RadDateInput1"
                                ValidationGroup="Group1" CssClass="Validator" ErrorMessage="Choose a date between 5th of January 2005 and 1st of September 2012"
                                Display="Dynamic" MaximumValue="2012-09-01-00-00-00" MinimumValue="2005-01-05-00-00-00"></asp:RangeValidator>
                            <asp:RequiredFieldValidator ID="PickerRequiredFieldValidator" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" CssClass="Validator" ControlToValidate="RadDateInput1"
                                ErrorMessage="Please, select a date!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button Text="Postback" ID="SubmitButton" runat="server" ValidationGroup="Group1">
                            </asp:Button>
                        </td>
                        <td>
                            <asp:Button Text="Reset" ID="ResetButton" runat="server" OnClick="ResetButton_Click">
                            </asp:Button>
                        </td>
                        <td colspan="2">
                            <asp:Button Text="Login" ID="LoginButton" runat="server" ValidationGroup="Group2">
                            </asp:Button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <asp:CheckBox ID="CheckBox1" runat="server" CssClass="CheckBox" Text="Client Side Validation"
                Checked="True" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged">
            </asp:CheckBox>
            <br />
            <br />
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Input.png" AlternateText="tlrk.it/18uT6oP" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/18uT6oP">tlrk.it/18uT6oP</a>
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here