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

7 posts, 0 answers
  1. Melanie
    Melanie avatar
    4 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    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.

     

  2. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 01 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Melanie
    Melanie avatar
    4 posts
    Member since:
    Apr 2015

    Posted 03 May 2015 in reply to Eyup Link to this post

    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.

  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 06 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Melanie
    Melanie avatar
    4 posts
    Member since:
    Apr 2015

    Posted 06 May 2015 in reply to Eyup Link to this post

    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

  7. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 11 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Melanie
    Melanie avatar
    4 posts
    Member since:
    Apr 2015

    Posted 12 May 2015 in reply to Eyup Link to this post

    Hi Eyup,

    Brilliant, that works! Thank you :-)

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017