UI effect when cancelling keypress.

4 posts, 0 answers
  1. mqsash
    mqsash avatar
    31 posts
    Member since:
    May 2012

    Posted 25 Mar 2013 Link to this post

    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
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1144 posts

    Posted 28 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. mqsash
    mqsash avatar
    31 posts
    Member since:
    May 2012

    Posted 28 Mar 2013 Link to this post

    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
  4. Angel Petrov
    Admin
    Angel Petrov avatar
    1144 posts

    Posted 02 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top