keyboard navigation on a column that may have combobox or textbox

10 posts, 0 answers
  1. stephen
    stephen avatar
    19 posts
    Member since:
    Jul 2010

    Posted 26 Aug 2011 Link to this post

    Hi there,

    Only one column in my gridview allows user input. I use a template selector to decide whether the input will be via a textbox or combobox. I need to be able to navigate through the input column, choosing values, and continuing to navigate with just the keyboard. From another thread on here, i found that to navigate with the keyboard arrows, i can use this:

    in xaml:
    <telerikG:RadGridView  CurrentCellChanged="RadGridView_CurrentCellChanged">

    in xaml.cs:

     private void RadGridView_CurrentCellChanged(object sender, GridViewCurrentCellChangedEventArgs e)
            {
                var txtbox = e.NewCell.ChildrenOfType<TextBox>().FirstOrDefault();
                if (txtbox != null)
                {
                    Dispatcher.BeginInvoke(() => txtbox.Focus());
                }
               
                var combobox = e.NewCell.ChildrenOfType<ComboBox>().FirstOrDefault();
                if (combobox != null)
                {
                    Dispatcher.BeginInvoke(() => combobox.Focus());
                }
            }

    However, i find that while it works for textboxes, when it gets to a combobox, pressing the down arrow switches between the combobox options, pressing spacebar opens up the combobox's list, but i cant choose one of the options. Either way, it just gets stuck on the combobox, and there is no way to move to the next row in the grid's input column. Could you help me get keyboard navigation working for this case?

    Thanks,
    Stephen


  2. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 01 Sep 2011 Link to this post

    Hi Stephen,

    I believe you will get a better result with RadComboBox instead of MS ComboBox used as an editor in RadGridView. Indeed within RadGridView it is not so easy to open the drop down list, but you can easily workaround this with a similar to the following xaml:

    <telerik:GridViewDataColumn Header="Position" DataMemberBinding="{Binding Position}">
                                <telerik:GridViewDataColumn.CellEditTemplate>
                                    <DataTemplate>
                                        <telerik:RadComboBox ItemsSource="{Binding Positions, Source={StaticResource MyViewModel}}"
                                                             OpenDropDownOnFocus="True"
                                                  SelectedValue="{Binding Position, Mode=TwoWay}"/>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellEditTemplate>
                            </telerik:GridViewDataColumn>

    Let me know if this doesn't help.

    Best wishes,
    Nedyalko Nikolov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. DevCraft banner
  4. stephen
    stephen avatar
    19 posts
    Member since:
    Jul 2010

    Posted 06 Sep 2011 Link to this post

    Nedyalko,

    I tried the RadComboBox, but found that when it tried to drop down the box, my whole control crashed. I'm using an observablecollection<string> to populate it from my DataContext, which works fine from a normal ComboBox.

    Anyway, I'd prefer the behavior to be that you press the down arrow to go through the textboxes and the comboboxes, and only if a combobox has focus, then you can press spacebar to drop down the box, and the arrows to select your option, and 'enter' to accept one. Then i would like to be able to continue using the arrows to go up and down the other texboxes and comboboxes. 

    Do you know if such a behavior is possible?

    Thanks,
    Stephen
  5. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 12 Sep 2011 Link to this post

    Hello Stephen,

     Can you post more info about the RadComboBox crash? 

    All the best,
    Vlad
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. stephen
    stephen avatar
    19 posts
    Member since:
    Jul 2010

    Posted 13 Sep 2011 Link to this post

    Vlad,

    The crash was due to a style on the radcombobox which was for normal comboboxes. So now I have implemented your suggestion of using OpenDropDownOnFocus="True", and as i navigate through my textboxes with the keyboard and onto the combobox, I see it drop down as expected, and i am able to select one of the values. However, if I press the down arrow again, it does not go to the combobox below it on the next row, the way that it does for TextBoxes. Focus remains with the radcombobox.

    My ideal behavior would be that that arrows or tab key navigate up and down the column between the textboxes and radcomboboxes, and the spacebar opens the combobox, then once you select which option you'd like with the enter key, you can continue to use the arrow keys or tab key to keep going down the column to fill in more values. Like it would work in a web form.

    Thanks,
    Stephen

     
  7. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 15 Sep 2011 Link to this post

    Hello Stephen,

    The problem comes from the fact that RadComboBox (or any combo box) by default handles KeyDown.DownArrow event and selects next item, therefore keydown event doesn't reach RadGridView and RadGridView cannot navigate downwards. The only option to change RadComboBox.DownKey behavior is to create a control that inherits from RadComboBox and override HandleKeyDown() method.

    All the best,
    Nedyalko Nikolov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. stephen
    stephen avatar
    19 posts
    Member since:
    Jul 2010

    Posted 16 Sep 2011 Link to this post

    Nedyalko, 

    Here is my class, but I need to somehow call HandleKeyDown(e) from somewhere. There is no PreviewKeyDown event in the RadComboBox, so I don't know where to call it from.

    public class DataUICombobox : RadComboBox
        {
      
            public DataUICombobox()
            {
                this.KeyDown += new System.Windows.Input.KeyEventHandler(DataUICombobox_KeyDown);
              
            }
     
     
            private void HandleKeyDown(KeyEventArgs e)
            {
                if (e.Key == Key.Down)
                {
                    RadGridViewCommands.MoveDown.Execute(null);
                    RadGridViewCommands.SelectCurrentUnit.Execute(null);
                    RadGridViewCommands.BeginEdit.Execute(null);
      
                    e.Handled = true;
                }
            }
     
            void DataUICombobox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
            {
     
                 
     
                if (e.Key == Key.Tab)
                {
                    if ((Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift)
                    {
                        RadGridViewCommands.MoveUp.Execute(null);
                        RadGridViewCommands.SelectCurrentUnit.Execute(null);
                        RadGridViewCommands.BeginEdit.Execute(null);
                        e.Handled = true;
                    }
                    else
                    {
                        RadGridViewCommands.MoveDown.Execute(null);
                        RadGridViewCommands.SelectCurrentUnit.Execute(null);
                        RadGridViewCommands.BeginEdit.Execute(null);
                        e.Handled = true;
                    }
                }
     
     
            }
        }
  9. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 20 Sep 2011 Link to this post

    Hello Stephen,

    There is no need to handle key down event. RadComboBox has a HandleKeyDown() method, which could be overriden. Your code should look like following:

    public class DataUICombo : RadComboBox
        {
            protected override bool HandleKeyDown(Key systemKey, int platformKeyCode)
            {
                if (systemKey == Key.Down)
                {
                    RadGridViewCommands.MoveDown.Execute(null);
                    RadGridViewCommands.SelectCurrentUnit.Execute(null);
                    Dispatcher.BeginInvoke(() => RadGridViewCommands.BeginEdit.Execute(null));
     
                    return true;
                }
     
                return base.HandleKeyDown(systemKey, platformKeyCode);
            }
        }

    Be aware that BeginEdit command should be called via dispatcher, otherwise next (downward) cell will not be selected when BeginEdit() is called and will not enter into edit mode.
    Let me know if this doesn't help.

    Kind regards,
    Nedyalko Nikolov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  10. stephen
    stephen avatar
    19 posts
    Member since:
    Jul 2010

    Posted 21 Oct 2013 Link to this post

    Hi,

    Since upgrading to the latest controls for Silverlight 5, I found the code in this thread has stopped working. Here is the original code:

    private void RadGridView_CurrentCellChanged(object sender, GridViewCurrentCellChangedEventArgs e)
           {
               var txtbox = e.NewCell.ChildrenOfType<TextBox>().FirstOrDefault();
               if (txtbox != null)
               {
                   Dispatcher.BeginInvoke(() => txtbox.Focus());
               }
                
               var combobox = e.NewCell.ChildrenOfType<ComboBox>().FirstOrDefault();
               if (combobox != null)
               {
                   Dispatcher.BeginInvoke(() => combobox.Focus());
               }
           }

    Since upgrading the controls, e.NewCell is now null when opening the SL control with the grid on it so it crashes. If I put a null check in for e.NewCell, the keyboard selection functionality in this thread which was previously working on the old controls no longer works.

    I read this article about different selection events, but it seems to say that the CurrentCellChanged event should still work the same way:
    http://www.telerik.com/help/silverlight/gridview-selection-events.html

    I found this which looked like an interesting new way of selecting cells in a RadGridView, but would that select the combobox/textbox inside the cell?
    http://www.telerik.com/help/silverlight/gridview-how-to-set-current-cell.html


  11. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Oct 2013 Link to this post

    Hi,

    The problem is that the GridViewCell behind the TextBox you have defined as a CellTemplate steels the focus. So you should set it back after that.

    Please refer to the attached solution.

    Regards,
    Didie
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner