Hi,
I have a requirement to be able to navigate our website using only the keyboard (we support blind people who do not use a mouse).
We find that once a RadGrid FilterMenu has popped up after clicking the Filter button, it is not possible to close it without selecting a menu item or clicking elsewhere with the mouse. I need the menu to close when the user presses "Escape".
I cannot seem to find a way to intercept keystrokes with the FilterMenu - There doesn't seem to be an OnKeyPress event?
I hope you can help,
Thanks.
6 Answers, 1 is accepted
You can use the following approach to achieve this requirement:
<
ClientSettings
>
<
ClientEvents
OnKeyPress
=
"keyPress"
/>
</
ClientSettings
>
function
keyPress(sender, args) {
if
(args.get_keyCode() == 27 &&
$get(sender.get_id() +
"_rfltMenu_detached"
).style.display !=
"none"
) {
sender.get_element().click();
}
}
Hope this helps. Please give it a try and let me know if it works for you.
Regards,
Eyup
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Hi Eyup,
This does not work for me...
While we can capture the OnKeyPress event in the RadGrid, once the FilterMenu is opened then the event on the grid no longer fires. Probably because the FilterMenu is consuming the keystrokes?
I can't see a way to capture keystrokes once the menu is open. FilterMenu does not have an OnKeyPress event.
I've created a sample RadGrid web site to demonstrate that the suggested approach works as expected. Can you run the attached application and let me know about the result on your side?
Regards,
Eyup
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Hi Eyup,
Nope, that doesn't work. I wonder if I have an old version of the Telerik controls?
My version of Telerik.Web.UI is 2014.2.724.35. Is there perhaps a known issue with this version?
Thanks,
Mel
Indeed, it seems that this is version related variation. Please add the following alternative script solution to your page and let me know if it works for you as expected:
function
pageLoad(sender, args) {
$(document).on(
"keydown"
,
function
(e) {
if
(e.keyCode == 27) {
var
grid = $find(
'<%= RadGrid1.ClientID %>'
);
var
menu = $get(grid.get_id() +
"_rfltMenu_detached"
);
if
(menu.style.display !=
"none"
) {
grid.get_element().click();
}
}
});
}
Looking forward to your reply.
Regards,
Eyup
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Hi Eyup,
Brilliant, that works! Thank you :-)