Prevent Enter key from toggling checkbox

5 posts, 0 answers
  1. Michael H
    Michael H avatar
    17 posts
    Member since:
    Feb 2010

    Posted 02 Sep 2013 Link to this post

    I would like to have a RadButton checkbox toggle by only the space bar and not the Enter key.

    Is there an easy way to do this?

    Thanks
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 04 Sep 2013 Link to this post

    Hi Michael,

    You can use the client-side API of the RadButton control in order to detect when the Enter key is pressed and cancel the click event. The following code sample demonstrates this approach:
    <script type="text/javascript">
        function OnClientClicking(sender, args) {
            var event = args.get_domEvent();
            if (event.keyCode == 13) {
                args.set_cancel(true);
            }
        }
    </script>
     
    <telerik:RadButton ID="btnVolume" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
        Width="100px" Height="60px" AutoPostBack="false" Skin="Metro" OnClientClicking="OnClientClicking">
        <ToggleStates>
            <telerik:RadButtonToggleState
                Text="Volume: Mute" Selected="true"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState
                Text="Volume: Low"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState
                Text="Volume: Medium"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState
                Text="Volume: High"></telerik:RadButtonToggleState>
        </ToggleStates>
    </telerik:RadButton>


    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael H
    Michael H avatar
    17 posts
    Member since:
    Feb 2010

    Posted 04 Sep 2013 Link to this post

    Thanks very much Ianko!
  5. Thomas Yanez
    Thomas Yanez avatar
    8 posts
    Member since:
    Dec 2009

    Posted 18 Sep 2013 Link to this post

    EDIT : Forgot to mention, the RadButton in question is inside a RadNotification's content template, if that makes a difference.

    I tried to use that example to prevent the space bar from triggering the button (don't ask), but it doesn't seem to work.

    <script type="text/javascript">
        function OnClientClicking(sender, args) {
            var event = args.get_domEvent();
            if (event.keyCode == 32) {
                args.set_cancel(true);
            }
        }
    </script>

    Space was still triggering the button.  I put an alert() inside the condition to make sure I was getting there, and then the behavior changed to the alert popping up (so I was definitely in the condition), clearing itself without my interaction (assuming it ate the space) and the button not triggering, but then if I hit space again, this time, it would just trigger the button (no alert popped up.)

    Then, I tried this :

    <script type="text/javascript">
        function OnClientClicking(sender, args) {
            var event = args.get_domEvent();
            args.set_cancel(true);
        }
    </script>

    an unconditional cancelling of the event just for testing purposes.  While this version prevents mouse clicks from triggering the button, the space bar still triggers it.

    Am I just missing some big fat clue?
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 23 Sep 2013 Link to this post

    Hello Thomas,

    I have tried to reproduce the mentioned issue but to no avail. Could you please have a look at the short video in the attached archive and then tell me what I am missing?

    Could you also confirm that you are using the latest official version of RadControls - currently this is version 2013.2.717 and if not does upgrading to it resolves the issue?

    If the above step, however, is not helpful could you please try to reproduce the issue with the attached VS example and then send it back to us, so that we can make a research locally?

    Could you also confirm which is the browser under which you are experiencing the unexpected behavior?

    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017