7 digit phone showing incorrectly in mask

3 posts, 1 answers
  1. James
    James avatar
    11 posts
    Member since:
    Sep 2012

    Posted 27 Sep 2012 Link to this post

     Hello,

    I have a telerik grid with phone numbers.  They are the same other than variable name:

    <telerik:GridViewDataColumn Width="*"
                                                    CellStyleSelector="{StaticResource InvalidHomePhoneStyleSelector}"
                                                    DataFormatString="{}{0:(###) ###-####}"
                                                    DataMemberBinding="{Binding HomePhone,
                                                                                Converter={StaticResource PhoneNumberNumericConverter}}"
                                                    ShowDistinctFilters="False"
                                                    UniqueName="Phone" TextAlignment="Right">
                            <telerik:GridViewDataColumn.Header>
                                <TextBlock MaxHeight="32"
                                           Text="{Binding Path=Resource.HomePhone,
                                                          Source={StaticResource Messages},
                                                          Mode=OneTime}"
                                           TextTrimming="WordEllipsis"
                                           TextWrapping="Wrap" />
                            </telerik:GridViewDataColumn.Header>
                            <telerik:GridViewDataColumn.CellEditTemplate>
                                <DataTemplate>
                                    <telerik:RadMaskedTextBox EmptyContent="{Binding Path=Resource.EnterPhone,
                                                                                     Source={StaticResource Messages},
                                                                                     Mode=OneTime}"
                                                              FontStyle="Normal"
                                                              IsSpinEnabled="False"
                                                              Mask="(000) 000-0000"
                                                              MaskType="Standard"
                                                              Value="{Binding HomePhone,
                                                                              Mode=TwoWay,
                                                                              Converter={StaticResource PhoneNumberNumericConverter},
                                                                              ConverterParameter=String}" TextAlignment="Right" HorizontalContentAlignment="Right" />
                                </DataTemplate>
                            </telerik:GridViewDataColumn.CellEditTemplate>
                        </telerik:GridViewDataColumn>


    The point of this web page is for the user to update invalid information for the contact.
    The biggest missing info is the area code. 

    The InvalidHomePhoneStyleSelector makes the numbers red and italisized if they aren't 10 numbers.
    The PhoneNumberNumericConverter takes the input string and replaces all non numbers with ""


    There are 2 problems:
    1.  Even though I set everything to right alignment, the 7 digit numbers are showing up as (123) 456-7___ instead of (___) 123-4567
    2.  Typing new characters overwrites instead of inserts.  If they set the cursor to the beginning and type in the area code, it overwrites the part of the number they already have.  Is there some property I'm missing to make editing insert instead of override?

    Fixing the first problem would avoid the second. 

    Thank you for your help,
    James
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 Oct 2012 Link to this post

    Hi James,

     Is it mandatory for you to use the RadMaskedTextBox? We highly encourage you to use the RadMaskedInput controls which are actually a re-factored and improved version of MaskedTextBox.
    However, your requirement cannot be implemented out of the box with some properties. As we managed to understand you need your input to start from 4th position when the phone is 7 digits long or to start from position "0" when the phone is with code (10 digits long). This is custom scenario and it can be implemented with converter like so:
     

    <telerik:RadMaskedTextInput
                                    Mask="(aaa) aaa-aaaa"
                                    Value="{Binding Phone, Mode=TwoWay, Converter={StaticResource converter}}" />
    public class ValueConverter : IValueConverter
        {
            
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                var stringvalue = value.ToString();
                return stringvalue.Length <8 ? "   " + stringvalue : stringvalue;
            }
     
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if(value.ToString().StartsWith(" "))
                    return value.ToString().Substring(3);
                else
                    return value.ToString();
            }
        }

    This converter simply adds an extra spacing before the Phone so that the input starts from the 4th position. We hope this will work for you. 
    As for the Insert and Override option. Typing from the leftmost position to the rightmost is always straightforward - new symbol is set in the position of the cursor (caret) and then the position shifts with 1.
    However, when the Value/Text is empty and the caret is in the last (rightmost position) you can take advantage of the InputBehavior property of the MaskedInput controls. When it is set to Replace you edit the last symbol of the Value. When InputBehavior = "Insert", then you shift the Value symbols to the left.


    Greetings,
    Petar Mladenov
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. DevCraft banner
  4. James
    James avatar
    11 posts
    Member since:
    Sep 2012

    Posted 01 Oct 2012 Link to this post

    Thank you, another team member is going to give that a try.
Back to Top