removing unwanted behavior in RadMaskedNumericInput

[Ravi]

Hi There,

we dont want to use the below features of RadMaskedNumericInput

if we enter some digits in middle of the numeric value, the right side digits are overriding(in our case it should not override and should not allow the user to type any thing but to change the digit he can select the required digit/range and type to change)

Is it possible to change this behavior by overriding any thing ?

Regards,
Srinivas.

[Petar Mladenov]

Hello Srinivas,

We prepared a basic project for you which uses the ValueChanging event of the RadMaskedNUmericInput to achieve this requirement:

private void RadMaskedNumericInput_ValueChanging(object sender, Telerik.Windows.Controls.MaskedInput.RadMaskedInputValueChangingEventArgs e)
        {
            var input = e.OriginalSource as Telerik.Windows.Controls.RadMaskedNumericInput;
            var start = input.SelectionStart;
            if (start > 0 && input.Text[start] != input.Placeholder
                && input.Text[start - 1] != input.Placeholder)
                {
                e.Handled = true;
                }
        }

Could you please give it a try and let us know if it fits well in your scenario ? 
The attached project is a Silverlight one, but this code can be used in WPF as well.
Thank you in advance for your cooperation. Regards,
Petar Mladenov
Telerik

[Ravi]

Hi Petar Mladenov,

Thanks for the code and it looks promising but our requirement is slightly different. Let me narrate our requirement so that you can provide your expert comments on this.

Basic intro: We are developing a 3 tier architecture application in which the front-end is SL/WPF and back-end is oracle database. So when an input field is entered with a value that value will be saved to database corresponding to a column in a table. Column in the table will have an restriction based on its type i.e. Number or Char length. 

Requirement:  We would like to restrict the user from entering an input based on the maximum length of the column corresponding to it in database. For example if a column can take a maximum length of 12 characters then we would like to restrict the user from entering the input more than 12 characters. Same thing is for Numeric type of input i.e. if the restriction is Number(15,3) which means user can enter a maximum number of digits before decimal is 12 and after decimal is 3.

    Based on this requirement, we tried to use Masked controls but the behavior of masked control is slightly more advanced with lot of other functionality which we could not disable them. So we would like to see Masked Control behave in a similar way like a normal text box control with an single additional behavior of restricting the user from entering the input based on the condition provided in Mask property and nothing more.

For the character based one, we could achieve this by using maxlength property on the text box. But for numeric case, it was not so straight forward. So we thought that Masked control could be helpful. Moreover, we would like to use the common approach for both char restriction and numeric restriction.

We would like to know what is your suggestion in regards to our requirement. Can we use Masked controls behaving like a normal text box without all the other addition functionalities like place holders, editing in between the empty spaces etc but just having the restriction behavior. Or Do you guys have any other better idea to achieve this may be different control ?

Thanks in Advance,
Srinivas

[Petar Mladenov]

Hi Srinivas,

We will try to suggest two approaches for your requirements.
By setting the following settings on the MaskedNumericInput (if you use doubles, or CurrencyInput if you use decimals)

<telerik:RadMaskedNumericInput Mask="#12.3"
                                      Placeholder=" "
                                      AutoFillNumberGroupSeparators="False"/>

you limit the digits on the left of the decimal point to 12, but you will always see 3 digits on the right of the point. We hope this fits well in your requirement. PlaceHolder=" " (space character)  removes the "_" symbols.And finally, AutoFillNumberGroupSeparators = False removes the separators.

If you use ViewModels (View -ViewModel -DB) classes following the MVVM pattern you are also able to use TextInput like so:

xmlns:maskedInput="clr-namespace:Telerik.Windows.Controls.MaskedInput;assembly=Telerik.Windows.Controls.Input">

          <telerik:RadMaskedTextInput Mask="" x:Name="input" maskedInput:MaskedInputExtensions.MaxTextLength="16"
                                      Value="{Binding DoubleValue, Converter=...}"/>

This is no-mask functionality restricted only by the max text length. This solves your requirement for common code for numeric and char input but has the following negatives:
- You have to write converter to convert the string (the value of the TextInput is from type string) to Double. Here we suppose you have double/decimal property in the ViewModel and the ViewModel submits the value to the DB.
- You have to write the decimal symbol on your own. Which is an additional effort - numeric/currency have built-in decimal symbol. Currency also has built in currency symbol $.
Please also have in mind that the no-masked TextInput inserts characters like in normal TextBox whereas the NumericInput / CurrencyInput inserts digits from right to left.

We hope these explanations will help you proceed further. Let us know if you need additional assistance.

Regards,
Petar Mladenov
Telerik

[Ravi]

Hi,

Looks good but the devil is in details :) Let me narrate few other scenarios :

We set the default value as 1234.789 with the mask as "#12.3".
As the control can take more digits, the user is able to set his cursor on the left most end which we feel is not correct.
Can we control this ?

Next is if we select a portion of the input say "34" and try to replace it with "56" to see the value as 1256.789 but we are seeing 1265.789. After this if we select the 265 digits in "1265.789" and try to replace it with 23 to see the value as 123.789 but we are seeing 312.789.

We are expecting to see masked control to behave same in all aspects as a text box control with the restriction behavior only. 

Can you provide what are all properties to we need to set to see it behave in all aspects as an normal text box control with  just restriction only. If you can provide the answer to the bold statement then would be of great help.

Cheers,
Srinivas

[Petar Mladenov]

Hello Srinivas,

 Regarding the MaskNumericInput with Mask=#12.3 , I believe you are not ok with the ability to replace/insert new symbols in the beginning, not only with the fact that the caret is on the left ?
The examples you describe are mixture of bugs in our control and behavior controlled by the insert behavior - symbols are inserted from right to left.
So we think the standalone question in bold has one answer - you need MaskTextInput in insert mode with no mask:

<telerik:RadMaskedTextInput Mask=""  Width="200" VerticalAlignment="Center"
                                   InputBehavior="Insert"
                                   maskedInput:MaskedInputExtensions.MaxTextLength="12"
                                   />

But, once again, here you will have to type the decimal symbol on your own. The next step is that you will need a converter to translate the string to double value.

Regards,
Petar Mladenov
Telerik

[Ravi]

Hi Petar Mladeno,

we are not ok with the current functionality of masked controls, so we are planning to create a custom control. Thank you for your help.

Regards,
Srinivas.