7 digit phone showing incorrectly in mask

[James]

 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="[phone]"
                                                          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

[Petar Mladenov]

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

[James]

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