RadMaskedTextBox Behavior Problem

18 posts, 0 answers
  1. johnv
    johnv avatar
    36 posts
    Member since:
    Apr 2008

    Posted 23 Jun 2010 Link to this post

    To Whom it may concern,

    My team is developing an app that uses RadTextBoxes and we are experiencing a problem where the masked textbox doesn't behave as we think it should. Ideally we think that the textbox should work just like a regular asp.net textbox except that it shows a mask to the user and only allows specific characters (such as numbers for a phone number) to be entered.

    In an asp.net textbox the text is always left justified. In other words you can't simply click to the 7th character place in the textbox and begin typing - it defaults to the first available empty character and is always left justified.

    Not so with the RadMaskedTextBox. You can begin typing in any position you want.We played with the different options like SelectAll, CaretToBeginning, and CaretToEnd, but some of us are just not happy with the outcome and feel that it may be confusing to some of our users.

    Is there any way to get the look, feel, and functionality we are looking for with this control? Thanks!

    Kind Regards,

    John
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 28 Jun 2010 Link to this post

    Hi John,

    You can make the caret go to the left side of the MaskedTextBox by wiring the client-side OnFocus event of the control and use the set_caretPosition() property as in the code-snippet below:

    function onFocus(sender, eventArgs) {
                sender.set_caretPosition(0);
           

    If you want to make it go to the left on each click in the RadMaskedTextBox, you can add the OnClick event to the control's attributes from the code-behind, for example in the PageLoad event handler:
    RadMaskedTextBox1.Attributes["onclick"] = "onClick(this, event);";

    And here is an example code showing how to find the control in this javascript function(it is advisable to surround the functions with a RadCodeBlock):

    function onClick(sender, eventArgs) {
                var maskedTextBox = $find("<%=RadMaskedTextBox1.ClientID %>");
                maskedTextBox.set_caretPosition(0);
            }

    If there is any difference in your requirements for the caret position from what I implemented, you can check this article describing client properties and methods of the RadMaskedTextBox and perform some custom logic on setting the caret's position.

    If any other issues concerning this scenario arise, please let me know by posting in the support ticket you have open, as it will be easier for us to follow each other's posts there.


    Kind regards,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Fawad
    Fawad avatar
    38 posts
    Member since:
    May 2009

    Posted 02 Jul 2010 Link to this post

    Hi Admin,

    Just wanted to say that the function:

    function onFocus(sender, eventArgs) {   
                sender.set_caretPosition(0);   

    Does not work in Safari and Chrome. Can you please tell me an alternate please?

    Regards.
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 02 Jul 2010 Link to this post

    Hi Fawad,

    I tested this approach in both browsers Chrome and Safari and it worked well on my side. I am attaching a sample project, which also includes the logic for the caret to go to the first "empty" position (by empty I mean the first position in the mask which is not filled with the expected character). Try it on your side and let me know if I am missing something out.

    Greetings,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Developer
    Developer avatar
    16 posts
    Member since:
    Jun 2009

    Posted 02 Jul 2010 Link to this post

    Hello Admin,

    Thanks for prompt reply, sorry, I should have been clearer. Actually the method I am using is "onFocus" not "onClick" but I don't know if that should matter?
    My box is in an ASP panel which I have then ajaxified with RadAjaxManager and put the code in RadCodeBlock. Because in real scenario I am clicking on RadGrid and getting the values in those boxes in ajaxified environment. But initially they are empty, so desired situation is to show on left. I am using VS 2010 and .NET 4.0, does that matter?

    I have put all my logic in your provided example and now your example also has stopped working in Safari and Chrome.

    Please see html:

     
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <telerik:RadAjaxManager ID="mgr" runat="server"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="pnl"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="pnl" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 


    Now here is RadCodeBlock, I have to set caret conditionally, that is, if the values are filled with RadGrid, then I don't need to set caret at all, please see:

    <telerik:RadCodeBlock ID="rcb" runat="server"
            <script type="text/javascript"
                function onFocus(sender, eventArgs) { 
     
                    var maskedTextBox = $find("RdTxtMobile"); 
     
                    if (maskedTextBox.get_value().length == 0 || sender.get_value().length == null) { 
                        maskedTextBox.set_caretPosition(0); 
                    } 
                    /*
                    var value = maskedTextBox.get_valueWithPromptAndLiterals();
                    var index = value.indexOf("");
                    maskedTextBox.set_caretPosition(index);
                    */ 
     
                } 
            </script> 
        </telerik:RadCodeBlock> 


    Here is rest of html, as my requirement is not to show any prompt characters :

    <div> 
            <asp:Panel ID="Pnl" runat="server"
                <telerik:RadTextBox ID="txt1" TabIndex="0" runat="server"
                </telerik:RadTextBox> 
                <telerik:RadMaskedTextBox ClientEvents-OnFocus="onFocus" ClientIDMode="Static" ID="RdTxtMobile" 
                    PromptChar="" runat="server" Mask="##### ######"
                </telerik:RadMaskedTextBox> 
            </asp:Panel> 
        </div> 
        </form> 
    </body> 


    Please see that where am I wrong and help me.

    Kind Regards.
  6. Developer
    Developer avatar
    16 posts
    Member since:
    Jun 2009

    Posted 02 Jul 2010 Link to this post

    Yes I am sorry, somehow I created two accounts and chrome puts me through this, I just noticed it so will delete one soon. Apologies.

    Kind Regards.
  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 06 Jul 2010 Link to this post

    Hi,

    If I understand your requirements correctly, the built-in properties of the RadMaskedTextBox control will handle this scenario. If you use SelectionOnFocus="CaretToEnd" the input caret appears at the end of the input control's value when it first gets focus and the text written by the user is appended to the control's current value.

    Please, correct me if I miss something out.

    Sincerely yours,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Developer
    Developer avatar
    16 posts
    Member since:
    Jun 2009

    Posted 08 Jul 2010 Link to this post

    Hi admin,

    No that is not what I am after. Here is the scenario:

    I have a masked textbox, with PromptChar set to "" because the requirement is not to show any "_" etc.
    I also have a RadGrid on the page. There are two requirements:
    1. On page load, the texbox is empty. I want the caret to go to extreme left in that empty MaskedTextBox when the box gets focused.
    2. On Grid's RowClick, the textbox is automatically filled with a value from Grid in AJAX way. Now this time, I do not want any action at all if box gets focus, means user can click anywhere and caret should stay.

    Simple enough, I have achieved both requirements in IE as below:

    <telerik:RadCodeBlock ID="rcb" runat="server">
            <script type="text/javascript">
                function onFocus(sender, eventArgs) {
      
                    var maskedTextBox = $find("RdTxtMobile");
      
                    if (maskedTextBox.get_value().length == 0 || sender.get_value().length == null) {
                        maskedTextBox.set_caretPosition(0);
                    }
                    /*
                    var value = maskedTextBox.get_valueWithPromptAndLiterals();
                    var index = value.indexOf("");
                    maskedTextBox.set_caretPosition(index);
                    */
      
                }
            </script>
        </telerik:RadCodeBlock>


    But this is not working in both Safari and Chrome. I searched and found out both use WebKit so in my view this client model is not working in WebKit. Please check if its the case.

    Regards.
  9. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 09 Jul 2010 Link to this post

    Hi,

    Yes, this seems to be browser dependant issue, as it works fine in Firefox, too. Still, if you use the OnClick event as I described above, everything works as expected in all four aforementioned browsers.

    One more downside of using OnFocus is that when you once set focus and the caret goes to the first position, if you click again in the textbox the javascript for setting position does not execute (as there was no loss and gain of focus) and the caret could go anywhere in the empty control.

    My suggestion is that you consider using OnClick instead of OnFocus.

    Kind regards,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Developer
    Developer avatar
    16 posts
    Member since:
    Jun 2009

    Posted 09 Jul 2010 Link to this post

    Hi Admin,

    Thank you for the reply and thanks for the patience, it worked on click, I have no issue using either focus or click, so its working for now. :-)

    Kind Regards.
  11. shakeel
    shakeel avatar
    4 posts
    Member since:
    Nov 2018

    Posted 24 Jan 2019 Link to this post

       <telerik:RadMaskedTextBox ID="txtID" runat="server" Mask="#######*#" > </telerik:RadMaskedTextBox>

       <telerik:RadMaskedTextBox ID="txtID" runat="server" Mask="#######\*#" > </telerik:RadMaskedTextBox>

    * LiteralPart is not working in ASP.net but

     <telerik:RadMaskedTextBox ID="txtID" runat="server"  Mask="#####-#######-#" > </telerik:RadMaskedTextBox>

    - LiteralPart is working. Please guide me.

  12. Vessy
    Admin
    Vessy avatar
    2128 posts

    Posted 28 Jan 2019 Link to this post

    Hi John,

    Can you, please, elaborate on the exact behavior you face when saying that it's not working? I tested the provided snippet at my end and they and the * sign behaves as literal as expected. I have tested it with the latest 2019 R1 version of the controls.

    Details about the expected behavior of the * sign is  given here:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/maskedtextbox/features/masks

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. shakeel
    shakeel avatar
    4 posts
    Member since:
    Nov 2018

    Posted 28 Jan 2019 in reply to Vessy Link to this post

    Working Version : UI for ASP.NET AJAX 2015

    i have already read your mention links but When i am typing in control ,Asterisk(*) part automatic is not skipping and pointer don't move automatically to the other part of control. i have used other char except Asterisk(*). it moves automatically to the other part of control.

    please guide

  14. Vessy
    Admin
    Vessy avatar
    2128 posts

    Posted 31 Jan 2019 Link to this post

    Hi,

    Thank you for the additional information, shakeel. The experienced behavior is changed intentionally several years ago (in the middle of 2015) in order to give the ability to hide characters behind "*" sing (e.g. when displaying a credit card number). The item for this feature can be seen here:
    https://feedback.telerik.com/aspnet-ajax/1374294-improve-radmaskedtextbox-with-ability-to-hide-mask-certain-characters-when-the-input-is-not-in-focus

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  15. shakeel
    shakeel avatar
    4 posts
    Member since:
    Nov 2018

    Posted 01 Feb 2019 in reply to Vessy Link to this post

    hi Vessy,

    please guide me. can I used the * sign as a literal in 2015 Version like latest version of telerik. if possible than kindly share with me or alternative solution. 

    waiting for your kindly response.

  16. Vessy
    Admin
    Vessy avatar
    2128 posts

    Posted 05 Feb 2019 Link to this post

    Hi shakeel,

    The behavior of the MaskedTextBox for asterisk is changed in 2015 Q1 SP1(version  version 2015.1.403), so you have to downgrade to version 2015.1.225 (or earlier).
    Unfortunately, there is no any alternative solution we can suggest you as the whole server-side parser is changed in favor of this improvement and cannot be modified externally.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  17. shakeel
    shakeel avatar
    4 posts
    Member since:
    Nov 2018

    Posted 11 Feb 2019 in reply to Vessy Link to this post

    Kindly tell me :Telerik UI for ASP.NET AJAX 2016 2 607 can solved my problem or i need to upgrade other version
  18. Vessy
    Admin
    Vessy avatar
    2128 posts

    Posted 11 Feb 2019 Link to this post

    Hi shakeel,

    Version 2016.2.607 contains the new behavior and will not solve your problem.

    You have to use version 2015.1.225 or earlier in order to have the desired behavior.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top