Using AJAX Textbox Extenders

Introduction

In this tutorial we will see some of the extenders provided by AJAX Toolkit. We can enhance the functionality of TextBox.

In this tutorial both ways of adding extenders are mentioned; i.e. in mark up source and in design time.

We will discuss the following textbox extenders:

1. Watermark Extender
2. Filtered TextBox
3. Masked Edit TextBox and Masked Edit Validator
4. Calendar Extender
5. Validator Callout Extender
6. Auto Complete Extender
7. Password Strength Extender

1. Watermark Extender

Watermark is an untouchable text; that usually helps us for guidance. Consider you are typing your data (e.g. First name, last name, etc.) into the text box. You can have watermark text to guide you for the process.

The following image displays the watermark in the text box for searching.

As soon as you click inside the textbox to type, the watermark becomes invisible.

The following steps will help you to use watermark extender for the textbox.

1. Add a textbox to the web page.
2. Add extenders by clicking the arrow flag on the top right corner of the text box.
3. Select Watermark Extender from the available list.
4. Now in the property page of the textbox you can see the extender's property as in the following figure.
   
   
5. As above you can change the property you wanted and you will get your watermark for your textbox.

The mark up source for the extender is as follows:

<asp:TextBox ID="txtWatermark" runat="server" Width="200px"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="txtWatermark_TextBoxWatermarkExtender" runat="server"
Enabled="True" TargetControlID="txtWatermark" WatermarkText="Type Your Search Here">
</cc1:TextBoxWatermarkExtender>

2. Filtered TextBox

While developing an application we are more concerned about the user inputs. As we treat the user as crazy, meaning the user can give anything as input. While taking the search or query or the data, we need to filter it.

We can extend our textbox to filter the user input. The available filter type options are as follows:

• Numbers (Only numbers can be taken as input.)
• Uppercase letters (Only Uppercase letters can be taken into input)
• Lowercase letters (Only Lowercase letters can be taken into input)
• Custom (Character list can be added for customizing the user input)

The basic idea behind filtered text box is that, the user cannot type Invalid characters into the textbox. The following procedure is followed for achieving filtering.

1. Add a textbox to the web page.
2. Add extenders by clicking the arrow flag on the top right corner of the text box.
3. Select Filtered Textbox Extender from the available list.
4. Now in the property page of the textbox you can see the extender's property as in the following figure.
   
   
5. As above you can change the property you wanted and you will get your filtered textbox.

The mark up source for the extender is as follows:

<asp:TextBox ID="txtFiltered01" runat="server" Width="200px"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="txtFiltered01_FilteredTextBoxExtender" runat="server"

Enabled="True" FilterType="Numbers" TargetControlID="txtFiltered01">

</cc1:FilteredTextBoxExtender>

3. Masked Edit TextBox and masked edit validator

In some cases you will be demanding a textbox which can take input as numbers only and it would be display as a valid date or valid number or even time. Here is the solution for you, masked edit extender for textbox provides you the textbox which can format user input into valid number, date and time.

We can mask a particular textbox for the following mask types:

• Date
• Number
• Time
• DateTIme

Consider the following figures, which displays date and number as masked type.

We can achieve masked edit textbox by following the below steps.

1. Add a textbox to the web page.
2. Add extenders by clicking the arrow flag on the top right corner of the text box.
3. Select MaskedEdit Textbox Extender from the available list.
4. Now in the property page of the textbox you can see the extender's property as in the following figure.
   
   
5. As you can see from the above figure by changing some properties we can achieve the masked edit textbox.

The markup source for the extender is as follows.

<asp:TextBox ID="txtMaskedEdit" runat="server" Width="200px"></asp:TextBox>

<cc1:MaskedEditExtender ID="txtMaskedEdit_MaskedEditExtender" runat="server"

Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txtMaskedEdit"/>

<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="txtMaskedEdit_MaskedEditExtender" ControlToValidate="txtMaskedEdit" Display="Dynamic" EmptyValueMessage="A Date is Required" InvalidValueMessage="The Date is Invalid" IsValidEmpty="False" TooltipMessage="Please Enter a Date"/>

4. Calendar Extender

This is an extender which provides a calendar control dynamically and provides the date when it is chosen.

We can use a particular textbox to show the calendar dynamically. The following figure describes our requirement.

The following steps are to be followed to achieve the above.

1. Add a textbox to the web page.
2. Add extenders by clicking the arrow flag on the top right corner of the text box.
3. Select Calendar extender for textbox from the available list.
4. Now in the property page of the textbox you can see the extender's property as in the following figure.
   
   
5. As from the above figure you can see we can change specific properties the calendar can be popped up. Note that to use image to pop up calendar use PopupButtonId property.

The mark up source for the extender is shown below.

<asp:TextBox ID="txtMaskedEditButton" runat="server" Width="200px"></asp:TextBox>

<cc1:CalendarExtender ID="txtMaskedEditButton_CalendarExtender" runat="server" Enabled="True"

Format="dd/MM/yyyy" PopupButtonID="imgCalendar" TargetControlID="txtMaskedEditButton"/>

<asp:Image ID="imgCalendar" runat="server" ImageUrl="~/Calendar.JPG" />

5. Validator Callout Extender

This extender is not exactly related to textbox, but it is related to Required Field Validator control. You could remember the Required Field Validator when it shows the error message it shows the message as it is labeled. Here adding this extender we can make the message as a callout.

The figure below describes the whole picture of using this.

Looks great isn't it. To use this extender you have to follow the below steps.

1. Add a textbox to the web page.
2. Add a RequiredFieldValidator and associate it with the target textbox.
3. Add extenders by clicking the arrow flag on the top right corner of the RequiredFieldValidator.
4. Select ValidatorCallout extender for RequiredFieldValidator from the available list.
5. Now in the property page of the RequiredFieldValidator you can see the extender's property as in the following figure.