Sunday, July 5, 2009

Using AJAX Textbox Extenders


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:

See full detail:

No comments: