RadMaskedTextBox Behavior Problem

10 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
    1876 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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.
  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 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
  6. 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.
  7. 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.
  8. Tsvetina
    Admin
    Tsvetina avatar
    1876 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
  9. 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.
  10. Tsvetina
    Admin
    Tsvetina avatar
    1876 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
  11. 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017