Telerik blogs

There are many ways to collect user input in ASP.NET web forms. There is the traditional ASP.NET TextBox control, or the handful of extenders available in the ASP.NET AJAX Control Toolkit. Or, you could stick to straight HTML with the <input> and <textarea> elements. For developers using Telerik’s web controls, there are more (and better) options. The RadControls for ASP.NET AJAX contain a set of input controls collectively named RadInput controls. Included in this set are the RadTextBox, RadNumericTextBox, RadMaskedTextBox, RadDateInput, and RadInputManager. In this blog post I will discuss the features of the RadTextBox for ASP.NET AJAX, including those which make it stand out from other input choices.

RadTextBox

The RadTextBox for ASP.NET AJAX is much like its ASP.NET counterpart. For starters, besides using the MaxLength property, there is no built-in functionality for limiting what users can enter unless you extend it with a ASP.NET validation control. You can use it as a single- or multi-line text input control, or you can modify it so that it hides its text by masking user input. By default, the RadTextBox is a single-line input control, but you can change its mode to the other two options by setting the TextMode property to MultiLine or Password, respectively.

<telerik:RadTextBox ID="RadTextBox1" runat="server" 
 Height="100px"
 Width="200px"
 TextMode="MultiLine" >
</telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox2" runat="server" 
 TextMode="Password" >
</telerik:RadTextBox>

1

So why use this control instead of the classic ASP.NET TextBox control? Well, the RadTextBox for ASP.NET AJAX also has a few upgrades when compared to its counterpart. First, you can modify the look and feel of the RadTextBox by setting its Skin property to one of the built-in skins that come with the RadControls for ASP.NET AJAX. You can also apply a watermark to the control when it is empty by setting the EmptyMessage property.

<telerik:RadTextBox ID="RadTextBox2" runat="server" 
 EmptyMessage="Enter Text Here"
 Skin="Black" >
</telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox1" runat="server" 
 EmptyMessage="Enter Text Here"
 Skin="Outlook">
</telerik:RadTextBox>

3

Very seldom will an input element appear without other elements near it, such as text labels describing the expected input or buttons for submitting the input. With the RadTextBox these features are built-in, allowing developers to avoid creating these additional controls on the page. By setting the ShowButton  property, a button will appear to the right of the textbox. You can control the location of the button by setting the ButtonsPosition property to Left or Right. In order to enable the button to post the form to the server when it is clicked, you must set the AutoPostback property to True. You should be aware that this property will cause the form to be posted back to the server only when the text value of the textbox has changed and a) the button is clicked, or b) the textbox loses focus. If you’d like to enable the button to post back to the server when no changes have been made to the value of the textbox, you can handle the RadTextBox’s OnButtonClick client-side event. In addition to a button element, the RadTextBox also offers a Label property that can be used to insert a textual description to the left of the textbox.

<telerik:RadTextBox ID="RadTextBox1" runat="server" 
 AutoPostBack="true"
 ButtonsPosition="Right"
 EmptyMessage="Email Address"
 Label="Verify your email address:" 
 ShowButton="true"
 Skin="Telerik"
 Width="400px">
 <ClientEvents OnButtonClick="buttonClickHandler" />
</telerik:RadTextBox>
<script type="text/javascript">
 function buttonClickHandler(sender, args) {
        sender.raisePostBackEvent();
    }
</script>

4

Another cool feature is the ability to control the mouse cursor position when the RadTextBox receives focus. You can cause the caret to be placed at the beginning or end of the input text or have the entire text value selected by setting the SelectionOnFocus property to CaretToBeginning, CaretToEnd, or SelectAll.

<telerik:RadTextBox ID="RadTextBox2" runat="server" 
 SelectionOnFocus="SelectAll"
 Text="Select Me">
</telerik:RadTextBox>

Finally, I’d be remiss if I didn’t mention the client-side API that is exposed by the RadTextBox client-side object. You saw a taste of its client-side abilities when I demonstrated how to handle the OnButtonClick event in the example above. There are many other client-side events that are raised for the RadTextBox, allowing developers to have more control over its functionality. You can read the full list of events here.

In addition to a wide range of client-side events, you also have full access to the properties and methods that define the RadTextBox’s behavior through its client-side object. This is a huge distinction between the RadTextBox for ASP.NET AJAX and the ASP.NET TextBox. With this client-side object, you can perform a wide range of operations against the RadTextBox. You can get or set its value, enable or disable it, retrieve its associated DOM element, or do any number of other operations on it using JavaScript.

By way of example, let’s assume I have a checkout form on my online store that asks for a shipping and billing address. If I include a checkbox that indicates these are the same, then I can handle the OnBlur event to copy the value of one RadTextBox to the other.

<telerik:RadTextBox ID="rtbShippingAddress" runat="server"
 TextMode="MultiLine">
 <ClientEvents OnBlur="RadTextBoxBlur" />
</telerik:RadTextBox>
 
<telerik:RadTextBox ID="rtbBillingAddress" runat="server"
 TextMode="MultiLine">
 <ClientEvents OnBlur="RadTextBoxBlur" />
</telerik:RadTextBox>
 
Billing and Shipping addresses are the same
<input id="cbSameAddress" type="checkbox" /> 
function RadTextBoxBlur(sender, args) {
 var checkbox = $get('cbSameAddress');
 if (checkbox.checked) {
 var id = sender.get_id();
 var radTextBox = $find(id.replace('Shipping', 'Billing'));
        radTextBox.set_value(sender.get_value());
    }
}

You can read the full details about the RadTextBox client-side API here.

Wrap up

The RadTextBox element is easy to overlook in a suite full of controls like the RadGrid and RadEditor, but it really offers a lot of value to ASP.NET developers. With its extended functionality, it allows developers to create rich web forms much more quickly than with its traditional ASP.NET counterpart.

Stay tuned for the second installment of this blog series, in which I’ll cover the ins-and-outs of the RadNumericTextBox for ASP.NET AJAX.

[Source: C#]


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.