RadInput - Telerik ASP.NET Input











Isolate this demo as a stand-alone application

Telerik RadInput is a highly customizable component for controlled data, numeric and text inputs in ASP.NET applications. RadInput consists of four controls - RadTextBox, RadNumericTextBox, RadMaskedTextBox and RadDateInput which are shown in this demo.

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.

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

<%@ 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" %>

<!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>
</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">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" CssClass="demo-container">
            <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="Enter 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="25" />
                    <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 rowspan="1"></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" Width="100%">
                            </telerik:RadTextBox>
                            <br />
                            <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" ControlToValidate="RadTextBox1" ErrorMessage="Enter your name!"
                                CssClass="Validator"></asp:RequiredFieldValidator>
                        </td>
                        <td rowspan="5"></td>
                        <td>
                            <asp:Label ID="Label6" runat="server" AssociatedControlID="EmailLogin" Text="Email:"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="EmailLogin" runat="server" ValidationGroup="Group2" Width="100%">
                            </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" Width="100%" NumberFormat-DecimalDigits="0"
                                ValidationGroup="Group1">
                            </telerik:RadNumericTextBox>
                            <br />
                            <asp:RequiredFieldValidator ID="NumercTextBoxRequiredFieldValidator" runat="server"
                                ValidationGroup="Group1" CssClass="Validator" Display="Dynamic" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Enter your age!"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="NumericTextBoxRangeValidator" runat="server" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Please enter a number between 12 and 150" Display="Dynamic"
                                ValidationGroup="Group1" MaximumValue="150" MinimumValue="12" 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" Width="100%">
                            </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="(###)-######" Width="100%"
                                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>
                        <td></td>
                        <td>
                            <telerik:RadButton Text="Login" ID="LoginButton" runat="server" ValidationGroup="Group2"></telerik:RadButton>
                        </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" Width="100%">
                            </telerik:RadTextBox>
                            <br />
                            <asp:RegularExpressionValidator ID="emailValidator" runat="server" Display="Dynamic"
                                ValidationGroup="Group1" CssClass="Validator" ErrorMessage="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" Width="100%"
                                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></td>
                        <td colspan="3">
                            <telerik:RadButton Text="Postback" ID="SubmitButton" runat="server" ValidationGroup="Group1"></telerik:RadButton>
                            <telerik:RadButton Text="Reset" ID="ResetButton" runat="server" OnClick="ResetButton_Click"></telerik:RadButton>
                        </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>
    </div>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?