New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms InputManager Overview

TextBoxSettings
NumericTextBoxSettings
DateInputSettings
 MM/dd/yyyy
 dd MMMM yyyy
 dddd hh:mm
RegExpTextBoxSettings
MaskedTextBoxSettings

The RadInputManager offers an easy and intuitive way to extend a standard ASP.NET TextBox, and without any extra custom code, introduce much functionality, normally related to a Telerik RadInput control.

About RadInputManager for ASP.NET AJAX

Within the RadInputManager, there are four types of settings which could be added:

  • telerik:TextBoxSetting - the targeted text box will exhibit behavior like a normal RadTextBox
  • telerik:NumericTextBoxSetting - the targeted textbox will be accepting numeric input
  • telerik:DateInputSetting - the targeted text box will be accepting input in a date format
  • telerik:RegExpTextBoxSetting - the targeted text box will be accepting characters corresponding to a specified regular expression
  • telerik:MaskedTextBoxSetting - the targeted text box will exhibit behavior like a RadMaskedTextBox

RadInputManager and 120+ 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 and server-side API
  • Client-side and Server-side data validation
  • Advanced Skinning - The visual appearance of the Input controls can be easily customized through skins

  • DefaultCS.aspx
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="Fieldset"></telerik:RadFormDecorator>
    <style>
        .demo-container *{
            box-sizing:content-box
        }
    </style>
    <div class="demo-containers">
        <div class="demo-container size-narrow" id="Div1" runat="server">
            <fieldset id="FieldSet1" style="width: 300px; min-height: 140px;">
                <legend>TextBoxSettings</legend>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox1">Single line:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" Text="John Vu"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox2">Password:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox3">Multi-line:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Height="35px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

        <div class="demo-container size-narrow">
            <fieldset id="FieldSet2" style="width: 300px; height: 140px;">
                <legend>NumericTextBoxSettings</legend>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox4">Currency:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox4" runat="server" Text="77"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox5">Number:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox6">Percent:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

        <div class="demo-container size-narrow">
            <fieldset id="FieldSet3" style="width: 300px; height: 140px;">
                <legend>DateInputSettings</legend>
                <table>
                    <tr>
                        <td style="width: 60px;">
                            <label for="TextBox7">Date1:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox7" runat="server" Text="12/25/2009" Width="100px"></asp:TextBox>&nbsp;MM/dd/yyyy
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 60px;">
                            <label for="TextBox8">Date2:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox8" runat="server" Width="100px"></asp:TextBox>&nbsp;dd MMMM
                        yyyy
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 60px;">
                            <label for="TextBox9">Date3:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox9" runat="server" Width="100px"></asp:TextBox>&nbsp;dddd
                        hh:mm
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

        <div class="demo-container size-narrow">
            <fieldset id="FieldSet4" style="width: 300px; height: 140px;">
                <legend>RegExpTextBoxSettings</legend>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox10">Email:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox10" runat="server" Text="johnvu@telerik.com"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox11">SSN:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox12">Phone:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox12" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

        <div class="demo-container size-narrow">
            <fieldset id="FieldSet5" style="width: 300px; height: 140px;">
                <legend>MaskedTextBoxSettings</legend>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox13">IP Address</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox14">Zip code:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox14" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td style="width: 100px;">
                            <label for="TextBox15">Phone:</label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox15" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </div>

    <telerik:RadInputManager RenderMode="Lightweight" ID="RadInputManager1" runat="server">
        <telerik:TextBoxSetting BehaviorID="TextBoxBehavior1" EmptyMessage="type here" Validation-IsRequired="true">
            <TargetControls>
                <telerik:TargetInput ControlID="Div1"></telerik:TargetInput>
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:NumericTextBoxSetting BehaviorID="NumericBehavior1" EmptyMessage="type.."
            Type="Currency" Validation-IsRequired="true">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox4"></telerik:TargetInput>
            </TargetControls>
        </telerik:NumericTextBoxSetting>
        <telerik:NumericTextBoxSetting BehaviorID="NumericBehavior2" EmptyMessage="type.."
            Type="Number">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox5"></telerik:TargetInput>
            </TargetControls>
        </telerik:NumericTextBoxSetting>
        <telerik:NumericTextBoxSetting BehaviorID="NumericBehavior3" EmptyMessage="type.."
            Type="Percent" DecimalDigits="0">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox6"></telerik:TargetInput>
            </TargetControls>
        </telerik:NumericTextBoxSetting>
        <telerik:DateInputSetting BehaviorID="DateInputBehavior1" Validation-IsRequired="true"
            DateFormat="MM/dd/yyyy">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox7"></telerik:TargetInput>
            </TargetControls>
        </telerik:DateInputSetting>
        <telerik:DateInputSetting BehaviorID="DateInputBehavior2" DateFormat="dd MMMM yyyy">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox8"></telerik:TargetInput>
            </TargetControls>
        </telerik:DateInputSetting>
        <telerik:DateInputSetting BehaviorID="DateInputBehavior3" DateFormat="dddd hh:mm">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox9"></telerik:TargetInput>
            </TargetControls>
        </telerik:DateInputSetting>
        <telerik:RegExpTextBoxSetting BehaviorID="RagExpBehavior1" Validation-IsRequired="true"
            ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" ErrorMessage="Invalid Email">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox10"></telerik:TargetInput>
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
        <telerik:RegExpTextBoxSetting BehaviorID="RagExpBehavior2" ErrorMessage="Enter Social Security Number here"
            Validation-IsRequired="true" ValidationExpression="\d{3}-\d{2}-\d{4}">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox11"></telerik:TargetInput>
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
        <telerik:RegExpTextBoxSetting BehaviorID="RagExpBehavior3" ValidationExpression="[0-9]{6,}"
            ErrorMessage="Enter more than 6 figures">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox12"></telerik:TargetInput>
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
        <telerik:MaskedTextBoxSetting Mask="<0..255>.<0..255>.<0..255>.<0..255>" SelectionOnFocus="CaretToBeginning">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox13" />
            </TargetControls>
        </telerik:MaskedTextBoxSetting>
        <telerik:MaskedTextBoxSetting Mask="#####-####" SelectionOnFocus="CaretToBeginning" HideOnBlur="true" EmptyMessage="type here">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox14" />
            </TargetControls>
        </telerik:MaskedTextBoxSetting>
        <telerik:MaskedTextBoxSetting Mask="(###) ###-####-####" SelectionOnFocus="CaretToBeginning">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox15" />
            </TargetControls>
        </telerik:MaskedTextBoxSetting>
    </telerik:RadInputManager>

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

Support & Learning Resources

Find Assistance