In Q3 2013 SP1, the OnClientClicking handler of the RadButton will not get called after using the keyboard (enter key or spacebar) to activate the RadButton.
The issue seems to have something to do with the set_cancel() call; if the button is changed to "AutoPostBack=false" and the set_cancel() call is removed, the behavior returns to (mostly) normal. In that case, things work as expected when the enter key activates the button, but the spacebar still causes erratic behavior.
Is there a different way to preserve OnClientClicking behavior with keyboard activation of RadButtons or is this a bug?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function clickHandler(sender, args) { args.set_cancel(true); } </script> </telerik:RadScriptBlock></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <div> <telerik:RadButton ID="btnTest" runat="server" Text="Test Me" OnClientClicking="clickHandler"></telerik:RadButton> </div> </form></body></html>The issue seems to have something to do with the set_cancel() call; if the button is changed to "AutoPostBack=false" and the set_cancel() call is removed, the behavior returns to (mostly) normal. In that case, things work as expected when the enter key activates the button, but the spacebar still causes erratic behavior.
Is there a different way to preserve OnClientClicking behavior with keyboard activation of RadButtons or is this a bug?
3 Answers, 1 is accepted
0
Hello Aaron,
The set_cancel() method indicates whether the event will be canceled. As you have set true value to the method the behavior is expected and it should work the same way if it's clicked by the mouse. You could find useful this article about the OnClientClicking event. I have attached a video showing the behavior of the OnClientClicking event on my end when pressing the button using the keyboard and the mouse.
I hope you find this information helpful.
Regards,
Joana
Telerik
The set_cancel() method indicates whether the event will be canceled. As you have set true value to the method the behavior is expected and it should work the same way if it's clicked by the mouse. You could find useful this article about the OnClientClicking event. I have attached a video showing the behavior of the OnClientClicking event on my end when pressing the button using the keyboard and the mouse.
I hope you find this information helpful.
Regards,
Joana
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.
0
Orion
Top achievements
Rank 1
Rank 1
answered on 23 Dec 2013, 02:35 PM
Hi Joana,
I should have been clearer in my initial post; the handler works as expected until the keyboard is used, after which it no longer fires on mouse events.
I.e., using the snippet I provided:
1. Click button with mouse - handler is called (as expected)
2. Activate button with keyboard - handler is called (as expected)
3. Click button with mouse again - handler is not called.
4. Activate button with keyboard again - handler is called.
The issue lies in step 3 - after using the keyboard to activate the button, the handler no longer gets called for mouse clicks, but only on keyboard events. I would expect the handler to continue to be called regardless.
I should have been clearer in my initial post; the handler works as expected until the keyboard is used, after which it no longer fires on mouse events.
I.e., using the snippet I provided:
1. Click button with mouse - handler is called (as expected)
2. Activate button with keyboard - handler is called (as expected)
3. Click button with mouse again - handler is not called.
4. Activate button with keyboard again - handler is called.
The issue lies in step 3 - after using the keyboard to activate the button, the handler no longer gets called for mouse clicks, but only on keyboard events. I would expect the handler to continue to be called regardless.
0
Hi,
Thank you for clarifying the issue.
I have reproduced the issue only when I put an alert in the OnClientClicking handler. I have logged it into our system and the issue will be resolved for the next official release Q3 2013 SP2 scheduled for 15th of January 2014.
Until then, you can use the following workaround which should be placed at the end of the form:
Regards,
Nikolay
Telerik
Thank you for clarifying the issue.
I have reproduced the issue only when I put an alert in the OnClientClicking handler. I have logged it into our system and the issue will be resolved for the next official release Q3 2013 SP2 scheduled for 15th of January 2014.
Until then, you can use the following workaround which should be placed at the end of the form:
<script type="text/javascript"> Telerik.Web.UI.RadButton.prototype._keyDownEnter = function(args) { this._enterKeyDown = true; var e = args.rawEvent; e.returnValue = false; if (e.preventDefault) { e.preventDefault(); } if (this._clickRaised) { return $telerik.cancelRawEvent(e); } if (this._raiseClickingAndValidate(e)) { this._enterKeyDown = false; this._clickRaised = false; return $telerik.cancelRawEvent(e); } this._clickRaised = true; this._toggleState(args); this._firePrivateClick(e); }; Telerik.Web.UI.RadButton.prototype._keyDownSpace = function(args) { var e = args.rawEvent; if (this._clickRaised) { return $telerik.cancelRawEvent(e); } this._clickRaised = true; if (this._raiseClickingAndValidate(e)) { this._isCancelled = true; this._clickRaised = false; return $telerik.cancelRawEvent(e); } this._toggleState(args); return $telerik.cancelRawEvent(e); };</script>Regards,
Nikolay
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.