RadNumericTextbox automatically changes users input (without alert) when restricting users from entering decimal points and negative numbers

4 posts, 0 answers
  1. David
    David avatar
    13 posts
    Member since:
    Sep 2012

    Posted 24 Jun 2014 Link to this post

    I set the MinValue to 1 and the DecimalDigits to zero as shown below.

    <telerik:RadNumericTextBox ID="MyRadNumericTextBox"
        runat="server" 
        Culture="English (United States)"
        DbValueFactor="1" 
        MinValue="1" >
        <NumberFormat ZeroPattern="n" DecimalDigits="0"></NumberFormat>
    </telerik:RadNumericTextBox>

    Steps to Reproduce
    Add the above RadNumericTextBox to a Webform.
    Enter a negative number. When the RadNumericTextbox loses focus, the value entered automatically changes to the value set as MinValue.
    Enter a number containing a decimal. When the RadNumericTextbox  loses focus, the value entered is automatically rounded to the nearest integer.

    I did find the following java snippets in your forum that are suppose to block the user from entering decimals and negative symbols  but neither of them work on both IE and FireFox. 

    Delete key does not work in FireFox

    <script type="text/javascript">
        function OnKeyPress(sender, args) {
            var keycode = args.get_keyCode()
            if (keycode == 46 || keycode == 110) {
                args.set_cancel(true);
            }
        }
    </script>

    The following was posted as a solution to work with both FireFox and IE but I can't get it to work on either
    <script type="text/javascript">
        function OnKeyPress(sender, args) {
            var keyCharCode = args.get_domEvent().rawEvent.charCode;
     
            if (keyCharCode == sender.get_numberFormat().DecimalSeparator.charCodeAt() || keyCharCode == sender.get_numberFormat().NegativeSign.charCodeAt()) {
                args.set_cancel(true);
            }
        }
    </script>

    I would like to find a solution to this, but in the mean time I am swapping the RadNumericTextBox for the RadMaskedTextBox.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2314 posts

    Posted 27 Jun 2014 Link to this post

    Hello David,

    If you would like to prevent the values from being automatically corrected you need to set the AllowOutOfRangeAutoCorrect property to false. This way if the user enters an invalid value an invalid style will be applied to the input and the value is kept.

    Regarding your second query, if you would like to prevent the user from entering negative sign and decimal separator you could try the following handler for the OnKeyPress client event:

    function keyPress(sender, args) {
        var keyCharCode = args.get_domEvent().rawEvent.keyCode;
         
        if (keyCharCode == sender.get_numberFormat().DecimalSeparator.charCodeAt() || keyCharCode == sender.get_numberFormat().NegativeSign.charCodeAt()) {
            args.set_cancel(true);
        }
    }

    For your convenience I am attaching a sample project where the approach is illustrated.

    Regards,
    Viktor Tachev
    Telerik
     

    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.

     
  3. Daniel
    Daniel avatar
    5 posts
    Member since:
    Feb 2013

    Posted 30 Mar 2018 in reply to Viktor Tachev Link to this post

    Hi, 

    i have a similar problem.  i have a page that may load the values as a negative from the database, and i want that to show as an invalid negative number, so that the user cannot save until they fix the number.  however, with MinValue=0 set AND AllowOutOfRangeAutoCorrect="False", the value binds as 0 rather than the true negative amount.  can this be fixed?

    Daniel

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 02 Apr 2018 Link to this post

    Hello Daniel,

    When the MinValue is set, comparing it against the data happens on the server and the browser would not receive a wrong data(you can see what the browser received in the source view of the page by examining the $create() statement), as that can easily result in, well, wrong data.

    What I can suggest you look into is setting the liimts client-side (https://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/radnumerictextbox-client-object). For example:

    <telerik:RadNumericTextBox ClientEvents-OnLoad="setMinValue" runat="server" ID="rntb1"></telerik:RadNumericTextBox>
    <script>
        function setMinValue(sender, args) {
            sender.set_minValue(0);
        }
    </script>
    rntb1.AllowOutOfRangeAutoCorrect = false;
    //rntb1.MinValue = 0;
    rntb1.DbValue = -1234;


    This will let you get the bad data to the user but if they start editing, they will be corrected.

    I hope this suits your needs.

    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top