Prevent Enter key from toggling checkbox

[Michael H]

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

[Ianko]

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

[Michael H]

Thanks very much Ianko!

[Thomas Yanez]

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?

[Danail Vasilev]

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