Keyboard support for filter menu (filtermenu)

[Alexis]

Hello,
Is there a way I could naviguate the grid filter menu with my keyboard?

The scenario would be something like this:

- Enter my filtering expression in the filter textbox of the grid
- Press "Tab" so I move focus on the filter button
- Press "Enter" so it opens the filter menu
- Navigate to the desired filtering option using keyboard
- Press "Enter" to perform filtering.

I tryed to move the focus on the filter menu div using javascript but I couldn't do it for some unknown reasons.

Any one have a solution for this ?
Thanks alot!

[Iana Tsolova]

Hi Alexis,

Can you try handling the OnClientShown client-side event of the grid filtering menu and try focusing the first item as below:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    RadGrid1.FilterMenu.OnClientShown = "FocusMenu";
}

<script type="text/javascript">
    function FocusMenu(menu, eventArgs)
    {
        menu.get_items().getItem(0).get_linkElement().focus();
    }
</script>

Then you could try the following steps to navigate through the menu items:
    - type filter value in the filter textbox
    - click Tab to focus the filtering icon
    - click Enter to open the filtering menu
    - click Tab to navigate through the menu items
    - click Enter to select filter function and fire grid filtering

Give it a try and let me know if this helps.

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Alexis]

Thanks!
That's exactly what I was looking for!

My client also wanted to press enter to open the filter menu. So I added:

 

protected void GridDossiers_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem ligneFilter = (e.Item as GridFilteringItem);
        TextBox raisonBox = ligneFilter["RaisonSociale"].Controls[0] as TextBox;
        raisonBox.Width = Unit.Pixel(215);
        raisonBox.Attributes.Add("onkeypress", "return KeyPressFilter(this,event,'" + ((RadGrid)sender).ClientID + "','RaisonSociale');");
    }
}

// JAVASCRIPT
function KeyPressFilter(sender, e, GridID, colonne)
{
    var RadGrid = $find(GridID);
    var keynum;

    if(window.event) // IE
    {
        keynum = e.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which;
    }

    if(keynum == 10 || keynum == 13)
    {
        RadGrid._showFilterMenu(GridID + "_ctl00", colonne , event);
    }
}

So with all the code above you can do this scenario:

 

- Enter a filter value in a column

- Press enter (so it opens the filtermenu)

- Use keyboard to select the filtering option

- Enter press enter to perform the filtering

I think thats the best filtering experience you can give

to your end user ;)
Thanks Telerik!

[Iana Tsolova]

Hello Alexis,

I am happy to hear you have achieved your goal. And it is also very kind of you to share you solution with the community.

If further issues arise, do not hesitate to contact us again.

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.