UI effect when cancelling keypress.

[mqsash]

Hi

I would like to restrict entries of certain characters into a numeric text box, and I am doing it by handling the clientside Keypress event and cancelling the event in the JS function if the keypressed was one that I do not want to allow. This works great and user cannot type in the disallowed characters. (I am restricting the negative sign and the decimal point sign - see code snippet below).

Question I have is when users press a disallowed character, I would like the numeric text box to display the same visual effect as it does when users type in say an alphabet (which is not allowed on the numeric textbox).
In the case of typing in alphabets, the input box gets a red border and an image of a yellow triangle with an '!' is displayed in the control.
How can I achieve  this UI effect when I filter out additional characters using custom javascript.

FYI - here's my JS handler that rejects the negative sign and decimal point.

_allowPositiveIntegersOnly = function (sender, args) {
  /* Cancel the keystroke if it is a negativesign or a decimal separator */
  var keyCharacter = args.get_keyCharacter();
  if (keyCharacter == sender.get_numberFormat().DecimalSeparator ||
      keyCharacter == sender.get_numberFormat().NegativeSign) {
    args.set_cancel(true);
  }

};

Thanks

[Angel Petrov]

Hi,

In order to achieve the functionality desired you can use this code:

ASPX:

<telerik:RadNumericTextBox runat="server" ID="RTB1">
    <ClientEvents OnKeyPress="KeyPress" />
</telerik:RadNumericTextBox>

JavaScript:

function KeyPress(sender, args)
       {
           var keyCharacter = args.get_keyCharacter();
           if (keyCharacter == sender.get_numberFormat().DecimalSeparator ||
     keyCharacter == sender.get_numberFormat().NegativeSign)
           {
               args.set_cancel(true);
               sender._invalid = true;
               sender.updateCssClass();
           }
           else
           {
               sender._invalid = false;
               sender.updateCssClass();
           }
       }

Kind regards,
Angel Petrov
the Telerik team

[mqsash]

Thanks Angel,

That certainly applies the invalid input style to the control , but the style does not automatically get restored after the invalidStyleDuration has elapsed :(
I have verified that the sender._invalidStyleDuration is set to the value I had set in the markup but it does not seem to recognize it.

How do I make the invalid style go away in say about a 100 mseconds?

Thanks

[Angel Petrov]

Hi,

You can modify the JavaScript method like this:

function KeyPress(sender, args)
        {
            var keyCharacter = args.get_keyCharacter();
            if (keyCharacter == sender.get_numberFormat().DecimalSeparator ||
     keyCharacter == sender.get_numberFormat().NegativeSign)
            {
                sender._invalid = true;
                sender.updateCssClass();
                setTimeout(function ()
                {
                    sender._invalid = false;
                    sender.updateCssClass();

                }, 200);
                args.set_cancel(true);
            }
            else
            {
                sender._invalid = false;
                sender.updateCssClass();
            }
        }

This seems to work on my end.

All the best,
Angel Petrov
the Telerik team