keyboard navigation on a column that may have combobox or textbox

[stephen]

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

[Nedyalko Nikolov]

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

[stephen]

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

[Vlad]

Hello Stephen,

 Can you post more info about the RadComboBox crash? 

All the best,
Vlad
the Telerik team

[stephen]

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

 

[Nedyalko Nikolov]

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

[stephen]

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;
                }
            }


        }
    }

[Nedyalko Nikolov]

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

[stephen]

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

[Dimitrina]

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

[Ras Ran]

Tab and Enter Keys are not working with Grid Control Cell Template telerik wpf.....i want to focus all types of cells on enter keys or tab keys

 

<telerik:GridViewColumn  Header="Unit" UniqueName="Unit" CellStyle="{StaticResource GridViewCellStyle}" >
      <telerik:GridViewColumn.CellTemplate>
       <DataTemplate>
        <telerik:RadComboBox  telerik:StyleManager.Theme="Vista" BorderThickness="0" SelectedValue="{Binding ourUnit, Mode=TwoWay}" Background="White" Cursor="Hand" ToolTip="Select Unit" ItemsSource="{StaticResource UnitList}" DisplayMemberPath="unit_name" SelectedValuePath="unit_Id"  Height="40" Width="Auto"  SelectionChanged="ComboBox_SelectionChanged" BorderBrush="White" >
      </telerik:RadComboBox>
         </DataTemplate>
       </telerik:GridViewColumn.CellTemplate>
          </telerik:GridViewColumn