This is a migrated thread and some comments may be shown as answers.

Format String for RadNumericTextBox

6 Answers 389 Views
Input
This is a migrated thread and some comments may be shown as answers.
alphonse joseph
Top achievements
Rank 1
alphonse joseph asked on 16 Feb 2010, 06:49 AM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Veli
Telerik team
answered on 17 Feb 2010, 04:45 PM
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.
0
alphonse joseph
Top achievements
Rank 1
answered on 18 Feb 2010, 05:34 AM
Hi Veli,
  Thanks for the quick response.  Your solution has solved the problem.

Alphonse

0
Neha
Top achievements
Rank 1
answered on 17 Mar 2011, 12:58 PM
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).
0
Veli
Telerik team
answered on 17 Mar 2011, 02:23 PM
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
0
Neha
Top achievements
Rank 1
answered on 18 Mar 2011, 06:44 AM
Thanks. Its working fine. :)
0
Jhonny
Top achievements
Rank 2
answered on 18 Nov 2013, 10:33 PM
<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.
Tags
Input
Asked by
alphonse joseph
Top achievements
Rank 1
Answers by
Veli
Telerik team
alphonse joseph
Top achievements
Rank 1
Neha
Top achievements
Rank 1
Jhonny
Top achievements
Rank 2
Share this question
or