maskedInput without underline

[rachel]

i want to use with any maskedInput control for binding to nullable int bussiness property but:
1 i don't want the underline at all
2. i don't want the X image that exists inside the textbox

i just want to prevent from user to press not-digit char.

what the recommended control for this?

thanks

[Alex Fidanov]

Hi,

 You can hide the clear button by setting the IsClearButtonVisible property. Currently, you cannot completely remove the placeholders, by you can set the placeholder to a white space Placeholder=" ".

However, we are working on this and it is logged in our PITS here.

Kind regards,
Alex Fidanov
the Telerik team

[Bill]

The problem with using " " for the placeholder is that if you enter text, then put your cursor to the left and then press delete, the text is deleted one character at a time (as it should) and the cursor moves to the right as the invisible placeholders are redisplayed.
It looks like this works as expected but when the placeholder is invisible (" ") it looks weird and is confusing when the cursor moves to thr right in the empty field.

[Tina Stancheva]

Hello Bill,

With the latest release of our controls - Q2 2012 (v. 2012.2.0607) we've introduced a "no-mask" functionality in the RadMaskedInput control. It can be triggered by setting the Mask property like this:

<telerik:RadMaskedTextInput Mask=""/>

This feature removes the restrictions usually applied on the control by the Mask property so that the user can enter an unlimited number of characters in the controls. Please give this feature a try and let us know if it works for you.

All the best,
Tina Stancheva
the Telerik team

[danparker276]

What's the use of a Masked input with no mask?

When creating new text boxes should I be using RadMaskedTextBox?  That's the old version right?  I should be using RadMaskedCurrencyInput right?  But I can't re-create the same functionality.  Who in their right mind would want to see $___,___,___.__ when entering text?

[Pavel R. Pavlov]

Hello Dan,

We created the RadMaskedInput suit to get over all known limitations of the RadMaskedTextBox control. We designed each of the controls in the suit to handle a different type of input, but you're right that when they all use a Mask, it shows placeholders to indicate the positions which need to be filled. This is where the 'no-mask' feature comes handy.  Its purpose is to allow you to define an input control with no preset placeholders. And in case you need to somehow restrict the user input, as there is no mask defined, you can use the FormatString property. It allows you to control the decimal part of the numeric values in the MaskedNumeric(Currency)Input. You can also use the MaskedInputExtensions class to limit the length of the value entered in a MaskedTextInput without a mask. In all these case, as the Mask property of the control is empty, there are no expectations of a number of characters and positions and this is why there are no placeholders. You can find more info about this feature here.

Kind regards,
Pavel R. Pavlov
the Telerik team

[danparker276]

The no-mask and FormatString is what I needed.  You should put it up on your on-line demos. I think most people would use this.  My only issue now is, I can't limit the length of the number with FormatString.  Anyway to set a maxlength?


Below is my style

<Style x:Key="RadMaskedMoneyLimit" TargetType="telerik:RadMaskedCurrencyInput" >
    <Setter Property="Mask" Value="" />
    <Setter Property="FormatString" Value="c" />
    <Setter Property="TextMode" Value="PlainText" />
    <Setter Property="Width" Value="120"/>
    <Setter Property="IsClearButtonVisible" Value="False" />
    <Setter Property="IsLastPositionEditable" Value="False" />
    <Setter Property="SelectionOnFocus" Value="SelectAll" />
</Style>

[Pavel R. Pavlov]

Hello Dan,

As I see in your code you are using the FormatString property, which means you are working with money, and you have made a great choice with the RadMaskedCurrencyInput. However, keep in mind that if you want to limit the length of the number entered in the control, you have to use mask (ex. Mask="d6") and also by using the RadMaskedCurrencyInput control you don`t have to use the FormatString property to include the currency sign.

Please take a look at the attached project and see the implemented functionality.

Kind regards,
Pavel R. Pavlov
the Telerik team

[danparker276]

The problem is I have to set the Mask="" because otherwise I'll get those placeholders like mentioned earlier in this thread.  With the Mask="" I can't set a max length. I even tried setting the textbox style, but that is overridden.
I just want it to work the way it used to work in the old control.  
I think most people would use it this way, and what I want is the default for most 3rd party controls.  

-The the input to work like a regular textbox
-It should have a $ and currency format, like stringformat 'c'
-It should be able to set a max length

[Pavel R. Pavlov]

Hello Dan,

Please accept our apologies  for misunderstanding your issue.

Now I see that you need to limit the maximum length of the input. This can be done by using the MaskedInputExtensions class and specifically the Maximum property like this:

<telerik:RadMaskedCurrencyInput maskedInput:MaskedInputExtensions.Maximum="9999" Mask=""/>

In the above sample code, you set up the control to allow only numbers with up to 4 digits.
 
You can read more about the MaskedInputExtensions here. Keep in mind that by using this extension the maximum value that can be entered is limited.

Please take a look of the attached project and see the implemented solution. If you have any questions, don`t hesitate to ask.

Regards,
Pavel R. Pavlov
the Telerik team

[danparker276]

Thanks this works and works in the style sheet too.  You should put this up in your demos.

[danparker276]

I'm having problem with the textinput too.  I just want it to work like a regular textbox that will uppercase characters with a max length of 6.
The setters that I'm currently using are below, but I can put my values anywhere with the cursor position.  I don't want people to be able to enter "1   1".  It eventually goes to 11 after I move the cursor, but it would be better if it worked like a regular textbox.  If i use MaskedInputExtensions it doesn't really help.  I couldn't see a string format that would be of use for this.

<Setter Property="Placeholder" Value=" " />
<Setter Property="IsClearButtonVisible" Value="False" />
<Setter Property="TextMode" Value="PlainText" />
<Setter Property="SectionsNavigationMode" Value="None" />
<Setter Property="IsLastPositionEditable" Value="False" />
<Setter Property="SelectionOnFocus" Value="SelectAll" />
<Setter Property="Mask" Value=">a6" />

[Petar Mladenov]

Hi Dan, 

When you lost the focus from RadMaskedTextInput you see the value of its Text property. The way the Text property is set from the combination of the Value and the Mask properties is controlled also by the TextMode property:

• MaskedText - if a RadMaskedInput control's TextMode property is set to MaskedText, its Text value represents the formatted Value including the placeholder characters.
• PlainText- if a RadMaskedInput control's TextMode property is set to PlainText, its Text value will hold the formatted Value but without the placeholder characters.

So in your scenario you only need to set:

<Setter Property="TextMode" Value="MaskedText" />

Please check out this help article describing this and other key properties of the MaskedInput controls.

All the best,
Petar Mladenov
the Telerik team

[danparker276]

MaskedText/PlainText makes no difference.  I can still click the mouse to a different cursor postion. I can still have a value "A  A"
I can use:
 <Setter Property="maskedInput:MaskedInputExtensions.MaxTextLength" Value="6" />
to set the length to 6, but then my text won't be uppercase only.
Is there another way to set text to only uppercase besides Mask value =">a6" ?
Maybe it's the same as the PITS issue opened up:
http://www.telerik.com/support/pits.aspx#/public/silverlight/12713

But I was seeing if with maskedInput:MaskedInputExtensions.MaxTextLength, there might be another way to force uppercase now that I can limit the length.

[Petar Mladenov]

Hello Dan,

 We thought that this is your issue - when loosing the focus the Text changes from "1   1" to "11".
However, there is no other elegant way to force the uppercase. You can create uppercase the text in the ValueChanged event but I don't believe you will agree with this solution. Could you please again let us know the main differences from the TextBox and the MaskedInput with the mentioned properties? It wil be great if you list the exact steps , for example like type 1 space space 1, lost focus, got focus, click between 1 and 1 and etc.

Regards,
Petar Mladenov
the Telerik team

[danparker276]

I really just want it to behave exactly this but uppercase:
  <TextBox  Height="25" Width="100" MaxLength="6" />

The main difference I see is that when you click on the textbox, it will go to the cursor position that you clicked on.  Not that last actual character entered.  The regular textbox above has a limit of 6, but I can't put anything in position 6 unless I put something it positions 1-5.  Even if it's a space, that's fine, so '1    1' is valid as long as I press the space button.  I don't want to have any gaps in the value unless I specifically put a space in there.


Also, on the SelectionOnFocus.  If I set it to CaretToEnd it will go to the end of my max length.
If I type "A" in the 1st position of the box.  Then re-select it. I want it to go to postion 2, not position 6.
"A     "  on focus should go to "A|      "   with | being the cursor position.  This is similar to the above issue.

To fix this problem, I'm just using SelectionOnFocus=SelectAll .  It's not ideal, but that's the way I'm doing it now.  I might have to go to the regular textbox with a keyup depending on how much my users complain though.

[Petar Mladenov]

Hi Dan,

 We understand your requirement and we logged a related feature request in our PITS where you can track its status and vote for it, this way increasing its development priority.

All the best,
Petar Mladenov
the Telerik team

[Vincent]

Hi, 
I use a telerik RadMaskedTextInput like this :

 <telerik:RadMaskedTextInput
Grid.Row="1" Height="45" Margin="5,5,5,0" VerticalContentAlignment="Top"
        SectionsNavigationMode="None" Mask="a250" IsClearButtonVisible="False" TextMode="MaskedText" InputBehavior="Insert" Placeholder=" "
Value="{Binding Path=Personne.Commentaire, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />

I have problem with placeholder=" ",
if i use this, when i want to save the sentence "please help me", i save "pleasehelpme";
if i don't use this. when i load data "please help me" the text in radMaskedTextInput looks like this "please help me_______________";

Do you know how to fix it please?
Regards, Vincent.

[Petar Mladenov]

Hi Vincent,

You can achieve your requirement in two ways. The first one is to preserve your property settings of the MaskedInput and just use the Text property which will hold "please help me". The other approach is to use Mask = "" ( no-mask functionality) with MaxTextLength = 250 and not setting the Placeholder. In this case you can save the Value property:

<telerik:RadMaskedTextInput x:Name="maskInput"
                   VerticalContentAlignment="Center"
                   SectionsNavigationMode="None"
                   Mask=""
                    maskedInput:MaskedInputExtensions.MaxTextLength="250"
                   IsClearButtonVisible="False"
                   TextMode="MaskedText"
                   InputBehavior="Insert"
                   Value="{Binding Path=Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />
           <TextBlock Text="{Binding Value, ElementName=maskInput}" />

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

Please let us know if this helps you proceed further.

Regards,
Petar Mladenov
Telerik

[Vincent]

Thanx a lot dude!

I have an other problem with mask for phone, i use :
<telerik:RadMaskedTextInput Margin="5" Width="130" HorizontalAlignment="Left"
                                                       Mask="aa-aa-aa-aa-aa"  SectionsNavigationMode="None" IsClearButtonVisible="False"        UpdateValueEvent="LostFocus" 
                                                       Value="{Binding EntResidantDetail.Telephone, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />

i need to use UpdateValueEvent = LostFocus, because i need to check that users don't put letters. (UpdateValueEvent=PropertyChanged don't works with silverlight)
What i want is to focus out the radMaskedTextInput when user put the last number of number phone. I don't know how i can do with an UpdateValueEvent=LostFocus.

Best Regards, Vincent.

[Petar Mladenov]

Hello Vincent,

Probably this can be ahieved in code somehow but I prefer to focus on your requiremend - mask for phone and allowing only numbers (not letters). I believe you can achieve this with
Mask = "dd-dd-dd-dd" because "d" is the numeric format token for digit - it won't allow you to type letter.
Please refer to our Mask Tokens help article.

Regards,
Petar Mladenov
Telerik

[Bert]

Hi Tina

 

I've tried using the "no mask" mode but providing empty string as Mask value seems to break the Error functionality (e.g the input will no longer color red if the ValidationRegex fails). The only way I got it to work is to provide an invalid binding for the Mask property e.g. Mask={Binding ThisDoesNotExist}

Kind regards

Bert

[Petar Mladenov]

Hi Bert,

This is a very old thread with lots of questions and is getting harder to maintain and to find a particular question. I encourage you to open a new support ticket from your account with more details regarding your scenario. 

When the Mask property is bound, this allows creating a System.Windows.Controls.ValidationError instance (requiring binding expression as parameter in constructor). This is the reason you might receive error when Mask is bound compared to scenarios with non-bound mask. However, if your ViewModels are constructed for validation, this won't be required in your case. Also in the 2018 we added regex validation mechanism, you might check it out and see if it can fit well in your scenario too.

Regards,
Petar Mladenov
Progress Telerik