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

Selecting items with Space key in multi-select ComboBoxColumn

8 Answers 241 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Vic
Top achievements
Rank 1
Vic asked on 31 Aug 2012, 04:45 PM
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..

8 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 05 Sep 2012, 08:00 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Vic
Top achievements
Rank 1
answered on 05 Sep 2012, 12:38 PM
Thanks for your reply, Maya. 
How can I ensure that the CheckBox receives focus in this scenario?
0
Maya
Telerik team
answered on 06 Sep 2012, 09:09 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Vic
Top achievements
Rank 1
answered on 06 Sep 2012, 02:09 PM
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..
0
Maya
Telerik team
answered on 10 Sep 2012, 10:46 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Vic
Top achievements
Rank 1
answered on 10 Sep 2012, 03:36 PM
Thanks very much, Maya. That was helpful.
0
Vic
Top achievements
Rank 1
answered on 12 Sep 2012, 12:08 AM
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..
0
Konstantina
Telerik team
answered on 14 Sep 2012, 01:21 PM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Tags
GridView
Asked by
Vic
Top achievements
Rank 1
Answers by
Maya
Telerik team
Vic
Top achievements
Rank 1
Konstantina
Telerik team
Share this question
or