How do I make it so that the numbers entered by the user are what appears in the Masked Numeric Input control?

[Rod]

I'm replacing a plain textbox control that I had, with a RadMaskedNumericInput control, in a VS 2012 app. This control is to handle a client's social security number. However, in testing it I've found it doesn't exactly do what I want it to do. Here's the XAML:

<telerik:RadMaskedNumericInput x:Name="txtSSN" MinWidth="80"
        Text="{Binding SocialSecurityNo, UpdateSourceTrigger=PropertyChanged}" Mask="###-##-####"
        VerticalContentAlignment="Center" FontSize="15" Margin="3,0" BorderBrush="#FFE3E9EF"
        InputBehavior="Insert" />

With this, when the window first comes up, it looks like this: "___-__-___0". So if the user starts typing in a SSN, the problem becomes apparent. The 0, at the end of the control, starts getting pushed along. For example, suppose the user wanted to enter "123-45-6789" as a SSN. When they start typing what they get is, "___-__-__01". By the time they get to entering all digits from 1 to 9, in order, what they wind up with in the control is this: "012-34-5679". That is not what they want, but I don't know to make it work properly. Most likely I defined some property wrong, or left a property out. So, how do we achieve what we're trying to achieve?

[Petar Mladenov]

Hello Rod,

Let me first make a quick clarification.
The Text property of the NumericInput is a string property which gives you the string containing what you see - the value including the separators, mask literal symbols etc. So you have to use the Value which is of type double? and give you just the number you type / you set in the viewmodel.
Having this in mind, you can have double? proeprty in your ViewModel:

private double? socSecNumber;

        public double? SocSecNumber
        {
            get { return this.socSecNumber; }
            set
            {
                if (this.socSecNumber != value)
                {
                    this.socSecNumber = value;
                    this.OnPropertyChanged("SocSecNumber");
                }
            }
        }

Is default value will be null and when assigning an empty ViewModel you will achieve empty NumericInput with no 0 in it.


Regards,
Petar Mladenov
Telerik

[Rod]

Not quite, Petar. I want to use the Text property of the Masked Numeric Input control, because it does include the separators, mask literals, etc. You see our database stores the separators in the field, which is a VARCHAR(11) data type.

What we have does seem to properly invoke property changed event, so that's not the issue. The issue is with the behavior of the control. It should start with a value of 0, it should start with a value of null, that would work much better for us.

[Rod]

Petar, I'm wondering if I'm using the wrong Telerik masked edit control? What we want to store in the database is SSN's like this: 123-45-6789. That is not a number, that's a string. I'm going to investigate other Telerik masked edit boxes. What Telerik control would you recommend for capturing social security numbers, with the embedded dashes ("-")?

[Petar Mladenov]

Hi Rod,

 The Value property of the RadMaskedNumericInput has a default value of 0d and that is why 0 is displayed when Value property is not set / bound to ViewModel's property.
We want to propose two solutions since you need to save the whole string "123-45-6789" representing an SSN number:
- use RadMaskedTextInput with Mask ="", limit the number of maximum symbols to 11 and perform validation logic in ViewModel to validate the input (the two separators , the existence of 9 digits, etc.). This way the Value property of the control (which is of type string) will hold the SSN string and you will be able to send it directly to the DB. The negatove effect of this approach is that you won't see the literals "-" since the Mask is "-"
- use RadmaskedNumericInput with Mask="###-##-####". Bind the Value property to the SSN field in the DB schema and use Converter. For example like so:
MaskInput.Value---->DB.SSN Converter will Convert the double 123456789 to the string "123-45-6789".
DB.SSN-->MaskInput.Value Converter will ConvertBack the string "123-45-6789" to the double 123456789.
The conversion methods will be pretty straightforward. The positive effect is the Mask which will allow you to see the literals runtime.
A Key thing here to mention is that setting the Text property int he MaskedInput controls will not affect the Value property. Please consider it as only a getter type of property.
Let us know if this helps you proceed further.

Regards,
Petar Mladenov
Telerik

[Rod]

Thank you, Petar, I've decided to go with the RadMaskedTextInput control. Seems to work fine.

Thanks again!