Format String for RadNumericTextBox

7 posts, 1 answers
  1. alphonse joseph
    alphonse joseph avatar
    9 posts
    Member since:
    Aug 2009

    Posted 16 Feb 2010 Link to this post

    Hi,
       I would like to know if there is any provision for setting format string in RadNumericTextBox while in the edit mode.  I mean if it is possible to provide something like "#####.##" so that the user will be able to enter a maximum of 5 digits before the decimal point and a maximum of 2 digits after the decimal point while in edit mode.  I don't like to use radMaskedTextBox because of poor user experience.  Given below is the code which I have given:

     <telerik:RadNumericTextBox ID="txtCrAmt" Text='<%# bind("cramt") %>' MinValue="0" MaxValue="99999999.99" MaxLength="11" DataType="System.Decimal" Culture="en-GB" AutoPostBack="false" ClientEvents-OnKeyPress="KeyPressed" EnabledStyle-HorizontalAlign="Right" runat="server">  

     <NumberFormat AllowRounding="false" DecimalDigits="2" DecimalSeparator="." GroupSeparator="," GroupSizes="3"   />
                               
     </telerik:RadNumericTextBox>

    Alphonse
  2. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 17 Feb 2010 Link to this post

    Hello alphonse,

    Actually, it's pretty easy to comine regular expression with RadNumericTextBox to additionally validate user input while typing. The regular expression matching at most 5 whole digits and at most 2 optional decimal digits would be:

    /^\d{0,5}(\.\d{0,2})?$/

    So, you can use RadNumericTextBox's OnKeyPress event to  validate by that regex:

    function validateRegEx(sender, args)
    {
        if (!sender._isNormalChar(args.get_domEvent()))
        {
            return;
        }
         
        var maxWholeDigits = 5;
        var maxDecimalDigits = 2;
        var separator = sender.get_numberFormat().DecimalSeparator;
        var regExpStr = "^\\d{0," + maxWholeDigits + "}(\\" + separator + "\\d{0," + maxDecimalDigits + "})?$";
        var regex = new RegExp(regExpStr);  //this should give "/^\d{0,5}(\.\d{0,2})?$/"
        var newValue = sender._textBoxElement.value + args.get_keyCharacter();
     
        document.title = regex;          
     
        if (!regex.test(newValue))
        {
            args.set_cancel(true);
        }
    }

    The above method is the javascript event handler of the OnKeyPress client event. We test to see if the current textbox value + the new character form a string that is matched by  the needed regular expression. If not, we cancel the event.

    Regards,
    Veli
    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. alphonse joseph
    alphonse joseph avatar
    9 posts
    Member since:
    Aug 2009

    Posted 17 Feb 2010 Link to this post

    Hi Veli,
      Thanks for the quick response.  Your solution has solved the problem.

    Alphonse

  5. Neha
    Neha avatar
    4 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2011 Link to this post

    Hi,

    But this will not work if the user enters a digit in the middle of the number. Since, the 'new_value', that you are testing for regular expression, has newly added digit appended at the end of the string(not in the middle/correct position).
  6. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 17 Mar 2011 Link to this post

    Yes, here is the corrected version:

    function validateRegEx(sender, args)
    {
        if (!sender._isNormalChar(args.get_domEvent()))
        {
            return;
        }
                     
        var maxWholeDigits = 5;
        var maxDecimalDigits = 2;
        var separator = sender.get_numberFormat().DecimalSeparator;
        var regExpStr = "^\\d{0," + maxWholeDigits + "}(\\" + separator + "\\d{0," + maxDecimalDigits + "})?$";
        var regex = new RegExp(regExpStr);  //this should give "/^\d{0,5}(\.\d{0,2})?$/"
     
        var caret = sender.get_caretPosition();
        var value = sender._textBoxElement.value;
        var char = args.get_keyCharacter()
     
        if (caret === value.length)
        {
            value = value + char;
        }
        else
        {
            //place the new char to the correct position based on caret location
            value = value.substr(0, caret) + char + value.substr(caret);
        }
     
        if (!regex.test(value))
        {
            args.set_cancel(true);
        }
    }


    Veli
    the Telerik team
  7. Neha
    Neha avatar
    4 posts
    Member since:
    Mar 2011

    Posted 18 Mar 2011 Link to this post

    Thanks. Its working fine. :)
  8. Jhonny
    Jhonny avatar
    5 posts
    Member since:
    Nov 2013

    Posted 18 Nov 2013 Link to this post

    <telerik:RadNumericTextBox ID="RadNumericTextBox" runat="server" Width="300px" 
                 MinValue="0" DataType="System.Decimal">    
        <NumberFormat DecimalDigits="2" />                                       
        <ClientEvents OnKeyPress="validateRegEx"/>
     </telerik:RadNumericTextBox>

    This is like a complement for Telerik.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017