Apply Security Mask

3 posts, 0 answers
    WILLIAM avatar
    134 posts
    Member since:
    Jun 2012

    Posted 14 Apr 2014 Link to this post

    Good Morning Telerik team,

    I'm trying to use the new MaskedTextInput; but I'm having trouble.  We have a business case where we need to hide certain characters in a field.  I'm binding to the Value property.  What I need to happen is:

    1.  The user types 123456789 in the control
    2.  When the control loses focus, I need it to display *****6789.

    I've tried applying a different mask, on the lostfocus event, but that doesn't work.
    I've tried binding to the text property thinking the value would stay as 123456789, but display properly.  That didn't work either.
    I've also tried explicitly setting the text value, but that does one of two things.  The text value changes, but isn't displayed, or the text value is displayed, but the Value property is also *****6789 instead of the original value.

    This seems like this should be simple.

    WILLIAM avatar
    134 posts
    Member since:
    Jun 2012

    Posted 14 Apr 2014 Link to this post

    I have figured out a way to display the value as *****6789.  I'm not applying a mask, but looping through the string and replacing characters with a *.  I think this defeats the purpose of using the control in the first place.  The next problem is when I click in the control, the value is displayed.  There are cases where *****6789 still needs to be displayed when the control has the focus.
  3. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1240 posts

    Posted 17 Apr 2014 Link to this post


    You can achieve your requirement by using the ValueToTextConverter property of the RadMaskedInput controls. Also, you can set the Mask property to "" (empty string) and the TextMode to PlainText

    Furthermore, in your ViewModel you can create a field which will hold the real value and a boolean flag indicating which value you should visualize. Also, you can subscribe to the GotFocus event of the control and visualize the appropriate value based on the boolean flag.

    For your convenience I prepared a sample project demonstrating this approach. Please take a look at it and let me know if you heave any other questions.

    Pavel R. Pavlov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top