Selecting items with Space key in multi-select ComboBoxColumn

[Vic]

Hello,
I've implemented a multi-select ComboBoxColumn using checkboxes as follows:

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding AppointmentTimes}" UniqueName="AppointmentTimes" Header="Scheduled Appointments" ItemsSourceBinding="{Binding AvailableTimes}" EditTriggers="CellClick">
     <telerik:GridViewComboBoxColumn.ItemTemplate>
          <DataTemplate>
               <StackPanel Orientation="Horizontal">
                    <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Content="{Binding TimeDisplay}" />
               </StackPanel>
          </DataTemplate>
     </telerik:GridViewComboBoxColumn.ItemTemplate>
     <telerik:GridViewComboBoxColumn.EditorStyle>
          <Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle1}">
                <Setter Property="OpenDropDownOnFocus" Value="True"/>
          </Style>
     </telerik:GridViewComboBoxColumn.EditorStyle>
</telerik:GridViewComboBoxColumn>

Everything works great except I'd like the user to be able to select the checkboxes using the spacebar.  How can I achieve this?

Thanks in advance..

[Maya]

Hi Vivian,

You need to make sure that when the user navigates up and down the items, the CheckBox gets the focus. Thus pressing the space bar should result in changing its state - from checked to unchecked and vice versus. 

Kind regards,
Maya
the Telerik team

[Vic]

Thanks for your reply, Maya. 
How can I ensure that the CheckBox receives focus in this scenario?

[Maya]

Hello Vivian,

Could you clarify what is the exact behavior that you want to achieve ? Do you want to be able to navigate up and down through the items in the combo box and check/ uncheck the CheckBox with space bar or you want to click on each item ? Or both ?
In both cases, you will need to find the CheckBox in the item (through ChildrenOfType<T> extension method) and set the focus to it. 

Regards,
Maya
the Telerik team

[Vic]

Hi Maya,
I'd like to be able to check/uncheck one or more boxes using both the spacebar and mouse clicks.
Based on the GridViewComboBoxColumn markup above, could you provide an example showing what event I would need to attach to in order to set the focus as I navigate through the ist?

Appreciate your help..

[Maya]

Hello Vivian,

You can try something like follows:

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding ClubID}"
                                                            SelectedValueMemberPath="ID"
                                                            ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=Clubs}"
                                                            EditTriggers="CellClick">
                                <telerik:GridViewComboBoxColumn.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                                      IsTabStop="True"
                                                      Content="{Binding Name}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:GridViewComboBoxColumn.ItemTemplate>
                                <telerik:GridViewComboBoxColumn.EditorStyle>
                                    <Style TargetType="telerik:RadComboBox" >
                                        <Setter Property="OpenDropDownOnFocus" Value="True"/>
                                        <Setter Property="CanKeyboardNavigationSelectItems" Value="True" />
                                    </Style>
                                </telerik:GridViewComboBoxColumn.EditorStyle>
                            </telerik:GridViewComboBoxColumn>

public MainWindow()
        {
            InitializeComponent();
            this.AddHandler(RadComboBox.SelectionChangedEvent, new SelectionChangedEventHandler(OnSelectionChanged), true);
        }

        private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var comboBox = e.OriginalSource as RadComboBox;
            if (comboBox != null)
            {
                var selectedItem = comboBox.ItemContainerGenerator.ContainerFromItem(comboBox.SelectedItem) as RadComboBoxItem;
                if (selectedItem != null)
                {
                    var checkBox = selectedItem.ChildrenOfType<CheckBox>().FirstOrDefault();
                    if (checkBox != null)
                    {
                        checkBox.Focus();
                    }
                }
            }
        }

 

All the best,
Maya
the Telerik team

[Vic]

Thanks very much, Maya. That was helpful.

[Vic]

Hello Maya,

Unfortunately, I've just noticed a glitch with the above handler where setting the focus on the checkbox now causes the combo box selection to skip every other item when navigating through the list.  Commenting out the line checkBox.Focus() restores normal selection.   Any idea what's causing this?

Thanks..

[Konstantina]

Hi Vivian,

Indeed, I managed to reproduce the issue you reported. I have logged it in PITS, so you could vote for it and track its status to see when it is going to be fixed.
Your Telerik points have been updated for your involvement.

Regards,
Konstantina
the Telerik team