Set Dynamic Mask using RadMaskedTextBox

16 posts, 1 answers
  1. Mohan
    Mohan avatar
    17 posts
    Member since:
    Jun 2012

    Posted 16 Jul 2012 Link to this post

    Team,

    Scenario
     : I have to assign the Mask property dynamically in Code Behind. 
    Issue : Not able to type anything on the textbox field and nothing to display

    IN ASPX:
    <telerik:RadMaskedTextBox ID="tbHours" runat="server" SelectionOnFocus="SelectAll"                                                                                     CssClass="RadMaskedTextBox80" Height="20px"></telerik:RadMaskedTextBox>

    IN C#
    If (true)
    {
    tbHours.Text = "00.0";
    tbHours.Mask = "<0..99>.<0..9>";
    }
    else
    {
    tbHours.Text = "00:00";
    tbHours.Mask = "<00..23>:<00..59>"; 
    }

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2012 Link to this post

    Hi Mohan,

    I tried to reproduce your issue in telerik version 2012, 2, 607, 40 but no avail. Please make sure that you are not getting any JavaScript error. Following is the sample code that I tried and worked as expected at my end.

    ASPX:
    <telerik:RadMaskedTextBox ID="tbHours" runat="server" SelectionOnFocus="SelectAll" CssClass="RadMaskedTextBox80" Height="20px">
    </telerik:RadMaskedTextBox>

    C#:
    if (true)
     {
        tbHours.Text = "00.0";
        tbHours.Mask = "<0..99>.<0..9>";
     }
    else
     {
        tbHours.Text = "00:00";
        tbHours.Mask = "<00..23>:<00..59>";
     }

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohan
    Mohan avatar
    17 posts
    Member since:
    Jun 2012

    Posted 17 Jul 2012 Link to this post

    Princy,

    Thanks for the reply,

    It's working fine, but when I try to get the value from the Textbox, it returns "0000" instead of "00:00".

    I need the actual output as 00:00, how can i achieve this.

    Regards
    Mohan
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2012 Link to this post

    Hi Mohan,

    You can access the text in the RadMaskedTextBox with the literal characters in the mask using TextWithLiterals property of RadMaskedTextBox.

    C#:
    string text = tbHours.TextWithLiterals;

    Please take a look into this documentation for more information.

    Thanks,
    Princy.
  6. Mohan
    Mohan avatar
    17 posts
    Member since:
    Jun 2012

    Posted 18 Jul 2012 Link to this post

    Princy,

    One more issue is, when I use Mask like below;
    ASPX:
                        <telerik:RadMaskedTextBox ID="tbScheduledTime" runat="server" CssClass="RadMaskedTextBox50"
                            Height="20px" Mask="<00..23>:<00..59>" >
                        </telerik:RadMaskedTextBox>

    In the page load it display like "0:0", actually it should get display like "00:00".

    For Eg:
    When I type the Time 08:30, it display as "8:30", the starting zero is disabled at the time of showing. 
    Expected output display should be "08:30".

    Regards
    Mohan

  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    Hi Mohan,

    Unfortunately I couldn't replicate your issue. Following is the code that I tried which worked as expected at my end.

    ASPX:
    <telerik:RadMaskedTextBox ID="tbScheduledTime" runat="server" CssClass="RadMaskedTextBox50" Height="20px" Mask="<00..23>:<00..59>" >
    </telerik:RadMaskedTextBox>

    Attached is the screenshot.

    Regards,
    Princy.
  8. THANGARAI
    THANGARAI avatar
    21 posts
    Member since:
    Nov 2013

    Posted 01 Dec 2013 Link to this post

    Hi Princy,

    Please see my scenario.
    I used RadMaskedTextBox for phone number field, with mask characters like  (_ _ _) _ _ _-_ _ _ _. for 10 numbers.
    whenever my page is refreshing or post baking that textbox flicking with some warning image. How to hide that flicking .
    please see the attachment.
    Thanks in advance
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Dec 2013 Link to this post

    Hi THANGARAI,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <asp:Label ID="Label1" runat="server" Text="Primary">
    </asp:Label>
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server"  Mask="(###)###-####">
    </telerik:RadMaskedTextBox>
    <telerik:RadButton ID="RadButton1" runat="server" Text="PostBack">
    </telerik:RadButton>

    Please provide your code if it doesn't help.
    Thanks,
    Princy.
  10. THANGARAI
    THANGARAI avatar
    21 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    <%@ Page Language="VB" %><%@ Import Namespace="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
     
    <script runat="server">
         
        Class RadMaskedTextBox
            Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
                 
            End Sub
        End Class
    </script>
     
    <head runat="server">
        <title></title>
    </head>
    <body style="margin-left:100px; margin-top:20px;">
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="scriptMgr" runat="server"></telerik:RadScriptManager>
        <div><asp:UpdatePanel ID="upp" runat="server"><ContentTemplate>
        Feild1<telerik:RadMaskedTextBox   ID="RadMaskedTextBox1" PromptChar="_ "  TabIndex="17" runat="server" Mask="(###) ###-####" SelectionOnFocus="CaretToBeginning" width="160px"></telerik:RadMaskedTextBox>
        <br /><br /> Feild2<telerik:RadMaskedTextBox  ID="RadMaskedTextBox2" PromptChar="_ "  TabIndex="17" runat="server" Mask="(###) ###-####" SelectionOnFocus="CaretToBeginning" width="160px"></telerik:RadMaskedTextBox>
        <br /><br /> Feild3<telerik:RadMaskedTextBox  ID="RadMaskedTextBox3" PromptChar="_ "  TabIndex="17" runat="server" Mask="(###) ###-####" SelectionOnFocus="CaretToBeginning" width="160px"></telerik:RadMaskedTextBox>
        <br /><br />  <asp:Button ID="Button1" runat="server" Text="Click Here" />
            </ContentTemplate></asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>


    Hi Princy,
    Please check my code. 
    The textbox is flicking when it is empty.
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Dec 2013 Link to this post

    Hi THANGARAI,

    The PromptChar property is used to set a character to indicate that the user input is required at a specific location in the input mask. This property will only accept a single character. If an attempt is made to assign a multi-character string to it, an error will occur. Please try to remove the space in the PromptChar property of RadMaskedTextBox.

    ASPX:
    <asp:UpdatePanel ID="upp" runat="server">
        <ContentTemplate>
            Feild1<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" TabIndex="17" runat="server"
                Mask="(###) ###-####" PromptChar="_" SelectionOnFocus="CaretToBeginning" Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            Feild2<telerik:RadMaskedTextBox ID="RadMaskedTextBox2" PromptChar="_" TabIndex="17"
                runat="server" Mask="(###) ###-####" SelectionOnFocus="CaretToBeginning" Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            Feild3<telerik:RadMaskedTextBox ID="RadMaskedTextBox3" PromptChar="_" TabIndex="17"
                runat="server" Mask="(###) ###-####" SelectionOnFocus="CaretToBeginning" Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Click Here" />
        </ContentTemplate>
    </asp:UpdatePanel>

    Thanks,
    Princy.


  12. THANGARAI
    THANGARAI avatar
    21 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    Hi Princy,
    Thanks for your reply . Its works superb.
    If I remove the space in PromptChar peroperty (ie PromptChar ="_"),
    the textbox is displaying like (___)___-____ . But we need to show the phone number format to the users like (_ _ _)_ _ _-_ _ _ _ .
    Is there any possibilities to achieve my scenario.?
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Dec 2013 Link to this post

    Hi THANGARAI,

    Please try to set the DisplayMask property of Rad
    NumericTextBox to display the text . Please have a look into the following code snippet.

    ASPX:
    <asp:UpdatePanel ID="upp" runat="server">
        <ContentTemplate>
            Feild1<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" TabIndex="17" runat="server"
                Mask="(###) ###-####" DisplayMask="(_ _ _)_ _ _ -_ _ _ _" SelectionOnFocus="CaretToBeginning"
                Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            Feild2<telerik:RadMaskedTextBox ID="RadMaskedTextBox2" PromptChar="_" TabIndex="17"
                runat="server" Mask="(###) ###-####" DisplayMask="(_ _ _)_ _ _ -_ _ _ _" SelectionOnFocus="CaretToBeginning"
                Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            Feild3<telerik:RadMaskedTextBox ID="RadMaskedTextBox3" PromptChar="_" TabIndex="17"
                runat="server" Mask="(###) ###-####" DisplayMask="(_ _ _)_ _ _ -_ _ _ _" SelectionOnFocus="CaretToBeginning"
                Width="160px">
            </telerik:RadMaskedTextBox>
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Click Here" />
        </ContentTemplate>
    </asp:UpdatePanel>

    Thanks,
    Princy.
  14. Jay
    Jay avatar
    2 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2014 Link to this post

    Hi I am facing the same problem, I get error notifications in radMaskedTextBox for every button click and its frustrating us.

    After using the following code I get other problems, when I place the cursor in the text box all the spaces given in the display mask is removed and after entering the numbers. the numbers which I entered is hidden on blur.

    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" TabIndex="17" runat="server"

                Mask="(###) ###-####" DisplayMask="(_ _ _)_ _ _ -_ _ _ _" SelectionOnFocus="CaretToBeginning"
                Width="160px">
            </telerik:RadMaskedTextBox>

    Please give me a correct solution.

    We have to show the format like this "(_ _ _)_ _ _ -_ _ _ _".  It should work in such a way that as given promptchar="_ " and at the same time the radMaskedtextbox should not show error notification on post back.

    Thanks & regards

    JayRam

  15. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jan 2014 Link to this post

    Hi Jay,

    Please have a look into the following code snippet which works fine at my end.

    ASPX:
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" TabIndex="17" runat="server"
        PromptChar="_" Mask="(# # #)# # #-# # # #" SelectionOnFocus="CaretToBeginning"
        Width="160px">
    </telerik:RadMaskedTextBox>

    Thanks,
    Princy.
  16. Jay
    Jay avatar
    2 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2014 Link to this post

    Thanks for the reply Princy, I have already tried with this but I don't want the letter space after entering the phone number.
  17. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Jan 2014 Link to this post

    Hi Jay,

    If I understand you correct, you want mask without spaces and display mask with spaces. This code is working on my side with no problem.

    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server"
        PromptChar="_"
        Mask="(###)###-####"
        DisplayMask="(# # #) # # # - # # # #"
        SelectionOnFocus="CaretToBeginning">
    </telerik:RadMaskedTextBox>

    Regards,
    Vasil
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017