Format String for RadNumericTextBox

[alphonse joseph]

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

[Veli]

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.

[alphonse joseph]

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

Alphonse

[Neha]

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).

[Veli]

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

[Neha]

Thanks. Its working fine. :)

[Jhonny]

<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.