The MultiSegmentDataEntry Control
Back
Use the MultiSegmentDataEntry control as a substitute for a TextBox when you have
a strongly patterned string. It is a similar idea to a masked textbox, where each
character position requires a specific character. For example, this control and
masked textboxes are used to enter phone numbers, IP addresses, and dates (although
the DateTextBox control within this suite provides much better date entry.)
While the masked textbox is one TextBox control with precise keyboard filtering,
the MultiSegmentDataEntry control defines multiple TextBoxes or DropDownLists, for
each "segment" of the data where the user types. Any static text, like the period
found between each segment of an IP address, is displayed between the segments and
the user doesn't have to type them. This design has several advantages over the
masked textbox:
- Browsers have a mixture of capabilities when it comes to handling typing at a particular
position. Most masked textboxes are limited to a specific type of browser.
- Each segment's textbox can have its own character set. For example, one can allow
letters while another allows digits.
- Segments can offer a DropDownList, which is a very good user interface for having
a limited set of choices, like the months of the year.
- Individual segments know when you type a character that separates two segments,
like the period between IP address segments. They autotab to the next segment so
the user can enter the text naturally, without worrying about the tab key.
- While masked textboxes generally have a fixed number of characters allowed, segments
can allow a variable number of characters. For example, in a credit card, there
are between 13 and 16 digits allowed. Plus segments autotab when the textbox becomes
filled.
- When working with integers, your textbox can offer spinners (up/down arrows) to
change the value.
- Each segment can have its own Validator in addition to a master Validator for the
entire text. For example, an IP address needs a RangeValidator for values from 0
to 255 on each segment.
- Interactive Hints can be shown on the page as focus moves into a segment. So on-screen
documentation is available. This feature requires a license for the Peter's Interactive
Pages.
All of these features help greatly improve the user's experience so the user knows
what to do and understands how to enter patterned data without knowing the pattern
in advance.
To make it work, the MultiSegmentDataEntry control has the ability to get and set
single patterned string, splitting or joining it according to rules that you specify.
For example, on a phone number, the minus character is just formatting and the digits
found before and after a minus appear in different segments.
The MultiSegmentDataEntry control supports most of the DES Validators that evaluate
textboxes. For example, if you set it up for credit card numbers, you can use the
CreditCardNumberValidator on it, and you can use the RequiredTextValidator to determine
if the control is blank. Additionally, since each segment has rules like text length,
valid characters, and "requires text", the MultiSegmentDataEntryValidator validates
any pattern.
Demo 1: U.S./Canada Phone number
This MultiSegmentDataEntry control has been setup to accept U.S. and Canada Phone
numbers, which have this format:
Area code - 3 digits, required, often enclosed by () or followed by space or dash
Local exchange - 3 digits, required, often followed by a space or a dash
Local phone - 4 digits, required
Extension - 1 to 5 digits, optional
This example shows autotabbing when you fill the fields or type any of characters
that are allowed to follow the segment. It includes the MultiSegmentDataEntryValidator
to confirm that you have entered text correctly. For example, if you only enter
2 digits into the area code, it will report an error. The RequiredTextValidator
is also assigned to demand an entry. Validators have been setup to change the color
of the segments if there is an error.
The Submit button lets you validate and if it posts back, to show a single string
retrieved from the MultiSegmentDataEntry control, by getting its Text property.
The formatting is using style sheets to establish a border around the textboxes
and to make the textbox borders lighter.
()- ext:
ASP.NET Syntax for this demo
<des:MultiSegmentDataEntry ID="MultiSegmentDataEntry1" runat="server" CssClass="DESVALMultiSegContainer">
<Segments>
<des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys=") -" MaxLength="3"
MinLength="3" Width="30px" AutoWidth="False" DisplayTextBefore="(" DisplayTextAfter=")"
FormattingTextAfter=") " FormattingTextBefore="(" IgnoreTheseCharsAfter=" " IgnoreTheseCharsBefore=" " />
<des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys="- " MaxLength="3"
MinLength="3" Width="30px" AutoWidth="False" FormattingTextAfter="-" IgnoreTheseCharsAfter=" " />
<des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys="ext:" MaxLength="4"
MinLength="4" Width="40px" AutoWidth="False" IgnoreTheseCharsAfter=" " />
<des:TextSegment CssClass="DESVALMultiSegTextBox" MaxLength="5" FormattingTextBefore=" x"
NoTextBeforeWhenBlank="True" Required="False" DisplayTextBefore=" ext:" />
</Segments>
</des:MultiSegmentDataEntry>
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="MultiSegmentDataEntry1"
ErrorMessage="Please fill this in">
<ErrorFormatterContainer>
<des:TextErrorFormatter Display="Dynamic" />
</ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:MultiSegmentDataEntryValidator ID="MultiSegmentDataEntryValidator1" runat="server"
ControlIDToEvaluate="MultiSegmentDataEntry1" ErrorMessage="This is not a valid Phone Number. Please correct it">
<ErrorFormatterContainer>
<des:TextErrorFormatter Display="Dynamic" />
</ErrorFormatterContainer>
</des:MultiSegmentDataEntryValidator>
Demo 2: IP Address
This MultiSegmentDataEntry control accepts IP Addresses. They have the following
format:
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255
There are four segments, all using an IntegerTextBox with spinners. Each segment
has a RangeValidator which reports an error if the digits are outside the range.
The MultiSegmentDataEntryValidator catches any segments left blank.
As you type, you can enter digits and periods. The periods will autotab.
...
This is not a valid IP Address. Please correct it
Between 0 and 255
Between 0 and 255
Between 0 and 255
Between 0 and 255
ASP.NET Syntax for this demo
<des:MultiSegmentDataEntry ID="MultiSegmentDataEntry2" runat="server">
<Segments>
<des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
<des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
<des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
<des:IntegerTextSegment ShowSpinner="True" SpinnerMinValue="0" SpinnerMaxValue="255"
MaxLength="3" />
</Segments>
</des:MultiSegmentDataEntry>
<des:MultiSegmentDataEntryValidator ID="MultiSegmentDataEntryValidator2" runat="server"
ControlIDToEvaluate="MultiSegmentDataEntry2" ErrorMessage="This is not a valid IP Address. Please correct it">
</des:MultiSegmentDataEntryValidator>
<des:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Between 0 and 255"
ControlIDToEvaluate="MultiSegmentDataEntry2_1" DataType="Integer" Minimum="0"
Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator2" runat="server" ErrorMessage="Between 0 and 255"
ControlIDToEvaluate="MultiSegmentDataEntry2_2" DataType="Integer" Minimum="0"
Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator3" runat="server" ErrorMessage="Between 0 and 255"
ControlIDToEvaluate="MultiSegmentDataEntry2_3" DataType="Integer" Minimum="0"
Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator4" runat="server" ErrorMessage="Between 0 and 255"
ControlIDToEvaluate="MultiSegmentDataEntry2_4" DataType="Integer" Minimum="0"
Maximum="255">
</des:RangeValidator>
Back