maskedInput without underline

21 posts, 0 answers
  1. rachel
    rachel avatar
    36 posts
    Member since:
    Sep 2010

    Posted 19 Apr 2012 Link to this post

    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
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 23 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Bill
    Bill avatar
    42 posts
    Member since:
    Feb 2011

    Posted 18 Jul 2012 Link to this post

    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.
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 18 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 04 Oct 2012 Link to this post

    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?
  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 09 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 09 Oct 2012 Link to this post

    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>
  9. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 12 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 12 Oct 2012 Link to this post

    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
  11. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 16 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  12. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 16 Oct 2012 Link to this post

    Thanks this works and works in the style sheet too.  You should put this up in your demos.
  13. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 22 Oct 2012 Link to this post

    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" />

  14. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 25 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  15. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 25 Oct 2012 Link to this post

    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.

  16. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  17. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 26 Oct 2012 Link to this post

    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.
  18. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 30 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  19. Vincent
    Vincent avatar
    10 posts
    Member since:
    Nov 2013

    Posted 28 Nov 2013 Link to this post

    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.



  20. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 29 Nov 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  21. Vincent
    Vincent avatar
    10 posts
    Member since:
    Nov 2013

    Posted 29 Nov 2013 Link to this post

    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.
  22. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 04 Dec 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
UI for WPF is Visual Studio 2017 Ready