RadGrid FilterMenu: Is there a way to close the filter menu using the keyboard?

[Melanie]

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.

 

[Eyup]

Hello Melanie,

You can use the following approach to achieve this requirement:

<ClientSettings>
    <ClientEvents OnKeyPress="keyPress" />
</ClientSettings>

JavaScript:

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

 

 

[Melanie]

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.

[Eyup]

Hello Melanie,

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

 

 

[Melanie]

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

[Eyup]

Hello 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

 

 

[Melanie]

Hi Eyup,

Brilliant, that works! Thank you :-)