Friday, April 10, 2015

Masked Edit TextBox and masked edit validator

Hi here in this post, lets discuss about Masked Edit text box and Masked Edit Validator.

In some scenarios we may get a  requirement like a textbox which can take input as numbers only and it would be display as a valid date or valid number or even time.

Lets see how to achieve it, masked edit extender for textbox provides us 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 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="txt_MaskedEdit" runat="server" Width="200px"></asp:TextBox>
     <cc1:MaskedEditExtender ID="txtMaskedEdit_MaskedEditExtender" runat="server"
                        Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txt_MaskedEdit"/>
     <cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="txtMaskedEdit_MaskedEditExtender" ControlToValidate="txt_MaskedEdit" Display="Dynamic" EmptyValueMessage="A Date is Required"  InvalidValueMessage="The Date is Invalid" IsValidEmpty="False" TooltipMessage="Please Enter a Date"/>

No comments:

Post a Comment