This is a migrated thread and some comments may be shown as answers.

Keyboard support for filter menu (filtermenu)

3 Answers 117 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alexis
Top achievements
Rank 1
Alexis asked on 15 Dec 2008, 11:21 PM
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!

3 Answers, 1 is accepted

Sort by
0
Accepted
Iana Tsolova
Telerik team
answered on 18 Dec 2008, 12:29 PM
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.
0
Alexis
Top achievements
Rank 1
answered on 18 Dec 2008, 03:00 PM
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!

0
Iana Tsolova
Telerik team
answered on 19 Dec 2008, 12:56 PM
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.
Tags
Grid
Asked by
Alexis
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Alexis
Top achievements
Rank 1
Share this question
or