Oct 22 2009

ajax filteredtextboxextender

FilteredTextBox is an Ajax extender. It is used to prevent a user from entering invalid characters into a text box.

Properties Of FilteredTextBox:

TargetControlID – It will target the id of the textbox to prevent the user to enter Numbers, LowercaseLetters, UppercaseLetters and Custom depends upon FilterType.

FilterType – Is applying type of Filter, as a comma-separated combination of Numbers, LowercaseLetters, UppercaseLetters, and Custom.

Numbers: TextBox will accept numbers only.

LowercaseLetters: TextBox will accept LowercaseLetter i.e (a to z     alphabets)

UppercaseLetters: TextBox will accept UppercaseLetters i.e. (A to Z alphabets)

Custom: TextBox will accept Combination of Symbols, LowercaseLetters, UppercaseLetters and Symbols (=, +, @, #, $, %, &, ^)

FilterMode – It contain ValidChars (default) or InvalidChars.

If set to InvalidChars, FilterType must be set to Custom;

if set to ValidChars, FilterType must contain Custom.

ValidChars - A string consisting of all characters considered valid for the text field, if “Custom” is specified as the filter type. Otherwise this parameter is ignored.

InvalidChars – A string consisting of all characters considered invalid for the text field, if “Custom” is specified as the filter type and “InvalidChars” as the filter mode. Otherwise this parameter is ignored.

FilterInterval – An integer containing the interval (in milliseconds) in which the field’s contents are filtered, defaults to 250.

How to Use Ajax FilteredTextBox

Step1: Create Ajax Enabled Website in vs2005. In Vs2008,By Default it create ajax Enabled website.

Step2: Drag TextBox from Standard controls in Toolbox and FilteredTextBoxExtender in Ajax control toolkit

Check this below Page directive

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”FilterTextBox.aspx.cs” Inherits=”Ajax_FilterTextBox” %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1%>

TagPrefix is cc1 below FilteredTextBoxExtender starts with

<cc1: FilteredTextBoxExtender />

If TagPrefix is ajaxToolkit then FilterTextBoxExtender starts with

<ajaxToolkit: FilteredTextBoxExtender />

Examples for FilteredTextBoxExtender and Textbox. TextBox will accept user to enter

Ex1: Accepting numbers ( FilterType = Numbers“)

<asp:TextBox ID=”txtNumbers” runat=”server”></asp:TextBox>

<cc1:FilteredTextBoxExtender ID=”FilteredTextBoxExtender1″ runat=”server” FilterType=”Numbers

TargetControlID=”txtNumbers“>

</cc1:FilteredTextBoxExtender>

Result: It allows user to enter Numbers only.

Remember: FilterMode property is ValidChars In FilteredTextBoxExtender

Ex2: Accepting LowercaseLetters (FilterType=”LowercaseLetters” )

<asp:TextBox ID=”txtLowercase” runat=”server”></asp:TextBox>

<cc1:FilteredTextBoxExtender ID=”FilteredTextBoxExtender1″ runat=”server” FilterType=”LowercaseLetters

TargetControlID=”txtLowercase“>

</cc1:FilteredTextBoxExtender>

Result: It allows user to enter LowercaseLetters

Remember: FilterMode property is ValidChars In FilteredTextBoxExtender

Ex3: Accepting UppercaseLetters (FilterType=”UppercaseLetters“)

<asp:TextBox ID=”txtUppercase” runat=”server”></asp:TextBox>

<br />

<cc1:FilteredTextBoxExtender ID=”FilteredTextBoxExtender1″ runat=”server”

FilterType=”UppercaseLetters

TargetControlID=”txtUppercase“>

</cc1:FilteredTextBoxExtender>

Result: It allows user to enter UppercaseLetters by pressing CapsLock

Remember: FilterMode property is ValidChars In FilteredTextBoxExtender

Ex4: Accepting combination (FilterType=”Custom“)

Sample1: Only Symbols then change the properties

FilterMode=”ValidChars”

FilterType=”Custom”

ValidChars=”#&@*()”

<asp:TextBox ID=”txtSymbols” runat=”server”></asp:TextBox>

<br />

<cc1:FilteredTextBoxExtender ID=”FilteredTextBoxExtender1″ runat=”server”

FilterType=”Custom”

TargetControlID=”txtSymbols”

ValidChars=”#&@*()”

FilterMode=”ValidChars”>

</cc1:FilteredTextBoxExtender>

Result: TextBox will accept Symbols like # & @ * ( ). Depends upon ValidChars proeprty in FilteredTextBoxExtender the symbols or characters will accept

Sample2: Accept LowercaseLetters and particular Symbols (FilterType=“LowercaseLetters,Custom)

Accept lowercase alphabets and symbols like underscore(_) and @ #

ValidChars=”_@#”

<asp:TextBox ID=”txtSymbols” runat=”server”></asp:TextBox>

<br />

<cc1:FilteredTextBoxExtender ID=”FilteredTextBoxExtender1″ runat=”server”

FilterType=”Custom”

TargetControlID=”txtSymbols”

ValidChars=”_@#” >

</cc1:FilteredTextBoxExtender>

Accept UppercaseLetters and Symbols

FilterType=”UppercaseLetters,Custom”

ValidChars=”_@#” ( you can change symbols, user to enter valid symbols )

Accept Upper Lower letters and Symbols

FilterType=”LowercaseLetters,UppercaseLetters,Custom”

ValidChars=”_@#” ( you can change symbols, user to enter valid symbols )

Accept Space Symbol using ValidChars  and Filter Type Custom

FilterType=”Custom”

ValidChars=”_ @#”

In between ValidChars press space bar also then Validchars add space also. In above ValidChars Underscore symbol after i press space bar then after that @ symbols. Using this TextBox will accept space also

Happy Coding

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Leave a Reply

Alibi3col theme by Themocracy