RadControls version
|
2010 Q3
|
.NET version |
.NET 3.5 or above
|
Visual Studio version |
2008, 2010
|
programming language |
C#
|
browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
RadTextBox for ASP.NET AJAX can be used as a password field in login forms. When presenting your users with the option of specifying a password, you may often need to indicate the strength of the entered password back to the user. The
ASP.NET AJAX Control Toolkit provides a
PasswordStrength extender that can be used with TextBox controls to indicate the strength of the user specified password based on predefined criteria. This project demonstrates how the PasswordStrength extender from the toolkit can be extended to support RadTextBox.
The main reason PasswordStrength cannot be used with RadTextBox off-the-shelf is that the extender specifies controls of type TextBox as targets only. This means that you need to subclass the extender to specify the
TargetControlType attribute with RadTextBox's type:
Now the subclassed
RadTextBoxPasswordStrength extender can be attached to RadTextBox instances. This is not enough, though. To check the password strength, the extender will try to attach to an input element with the specified target control's ID on the client. However,
RadTextBox renders its hidden validation input with its own ClientID, not the visible input the user types in. The extender needs the visible input, not the hidden field. To work around, we need to overwrite the client-side
PasswordStrengthExtenderBehavior.get_element() propety. The object is the client-side behavior component associated with the
PasswordStrength extender and
get_element() is the property that returns the HTML DOM element the extender is attached to (for more information on how extender controls work, refer to the
MSDN Creating an Extender Control topic). We need to modify the property to return the visible RadTextBox input, not the hidden validation field:
The above code checked if the input that is to be returned contains a CSS class that is attached only to the validation field of a RadTextBox control. If this is the case, we need to find the visible text box that has the same ID as the validation + "_text".
To integrate the above script modification to our subclassed extender control, we can override the control's
OnPreRender method to register the above javascript as a startup script:
And that's the complete subclassed extender control. It can extend
RadTextBox in addition to the standard
TextBox control. Check out the project to see it working.