Changing Tab and Enter Key Behavior

[Brian]

I am having trouble figuring out how to accomplish a couple things with RadGridView. Here is what I want to happen:

1. When a row is selected, the focus should be the entire row, not a specific cell.
2. Pressing Tab should move the selection to the next row. Pressing Tab on the last row should proceed to the next control on the form. Similar behavior should occur for Shift+Tab.
3. Pressing Enter should change the expanded/collapsed state of the selected row.

Here is the XAML that I am using for this:

<UserControl x:Class="RadControlsSilverlightApp1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <telerik:RadComboBox Grid.Row="0" Height="25" Width="100" Margin="10">
            <telerik:RadComboBoxItem Content="First" />
            <telerik:RadComboBoxItem Content="Second" />
            <telerik:RadComboBoxItem Content="Third" />
        </telerik:RadComboBox>

        <telerik:RadGridView Grid.Row="1" x:Name="grid" IsFilteringAllowed="False" AutoGenerateColumns="False" CanUserDeleteRows="False" CanUserInsertRows="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False" ShowInsertRow="False"
                             SelectionUnit="FullRow">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn IsReadOnly="True" Width="90" DataMemberBinding="{Binding Path=DateAdded,StringFormat='d'}">
                    <telerik:GridViewColumn.Header>
                        <TextBlock>Date<LineBreak/>Added</TextBlock>
                    </telerik:GridViewColumn.Header>
                </telerik:GridViewDataColumn>

                <telerik:GridViewToggleRowDetailsColumn Width="30" />

                <telerik:GridViewDataColumn Header="Name" IsReadOnly="True" TextWrapping="Wrap" Width="*" DataMemberBinding="{Binding Path=Name}"  />

                <telerik:GridViewDataColumn Header="City" Width="150" DataMemberBinding="{Binding Path=City}" TextWrapping="Wrap" />

                <telerik:GridViewDataColumn  Width="65" DataMemberBinding="{Binding Path=DuesOwed}" TextAlignment="Right">
                    <telerik:GridViewColumn.Header>
                        <TextBlock HorizontalAlignment="Center">Dues<LineBreak/>Owed</TextBlock>
                    </telerik:GridViewColumn.Header>
                </telerik:GridViewDataColumn>

                <telerik:GridViewDataColumn Width="70" IsReadOnly="True">
                    <telerik:GridViewColumn.Header>
                        <TextBlock>Eligibility</TextBlock>
                    </telerik:GridViewColumn.Header>
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadButton Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Padding="0" BorderThickness="0" Content="Verify" />
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="135" />
                            <ColumnDefinition Width="*"  />
                        </Grid.ColumnDefinitions>
                        <telerik:RadGridView Grid.Column="1" HorizontalAlignment="Left" ShowColumnHeaders="False" IsReadOnly="True" ItemsSource="{Binding Path=PurchasedItems}" IsTabStop="False"
                                             AutoGenerateColumns="False" CanUserDeleteRows="False" CanUserInsertRows="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False" ShowInsertRow="False">
                            <telerik:RadGridView.Columns>
                                <telerik:GridViewDataColumn Header="Item" IsGroupable="False" DataMemberBinding="{Binding Path=Description}" IsSortable="False" IsReadOnly="True" Width="100" />
                                <telerik:GridViewDataColumn Header="Price" Width="65" IsGroupable="False" DataMemberBinding="{Binding Path=Price}"  IsSortable="False" IsReadOnly="True" TextAlignment="Right" HeaderTextAlignment="Center" />
                            </telerik:RadGridView.Columns>
                        </telerik:RadGridView>
                    </Grid>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
        </telerik:RadGridView>

        <telerik:RadButton Grid.Row="2" Height="25" Width="100" Content="Do Something!" Margin="10" />
    </Grid>
</UserControl>

And the code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Controls;
using System.Windows.Input;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;

namespace RadControlsSilverlightApp1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            PersonData person1 = new PersonData { DateAdded = new DateTime(2011, 10, 16), Name = "Bob", City = "San Francisco", DuesOwed = "$145.68" };
            person1.PurchasedItems.Add(new PurchasedItem { Description = "Tennis shoes", Price = "$79.99" });
            person1.PurchasedItems.Add(new PurchasedItem { Description = "Sports jacket", Price = "$150.00" });

            PersonData person2 = new PersonData { DateAdded = new DateTime(2012, 02, 03), Name = "Gary", City = "Boston", DuesOwed = "$12.00" };
            person2.PurchasedItems.Add(new PurchasedItem { Description = "Plasma television", Price = "$1599.99" });
            person2.PurchasedItems.Add(new PurchasedItem { Description = "Radio", Price = "$14.99" });

            List<PersonData> data = new List<PersonData> { person1, person2 };
            grid.ItemsSource = data;

            grid.KeyboardCommandProvider = new ExpandCollapseKeyboardCommandProvider(grid);
        }
    }

    public class PersonData
    {
        public DateTime DateAdded { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public string DuesOwed { get; set; }
        public List<PurchasedItem> PurchasedItems { get; private set; }

        public PersonData()
        {
            PurchasedItems = new List<PurchasedItem>();
        }
    }

    public class PurchasedItem
    {
        public string Description { get; set; }
        public string Price { get; set; }
    }

    public class ExpandCollapseKeyboardCommandProvider : DefaultKeyboardCommandProvider
    {
        private RadGridView parentGrid;

        public ExpandCollapseKeyboardCommandProvider(RadGridView parentGrid)
            : base(parentGrid)
        {
            this.parentGrid = parentGrid;
        }

        public override IEnumerable<ICommand> ProvideCommandsForKey(Key key)
        {
            var commandList = base.ProvideCommandsForKey(key).ToList();

            if (key == Key.Tab)
            {
                int rowIndex = this.parentGrid.Items.IndexOf(this.parentGrid.SelectedItem);

                if ((Keyboard.Modifiers & ModifierKeys.Shift) > 0)
                {
                    if (rowIndex > 0)
                    {
                        commandList.Clear();
                        commandList.Add(RadGridViewCommands.MoveUp);
                        commandList.Add(RadGridViewCommands.SelectCurrentUnit);
                    }
                }
                else if (rowIndex + 1 < this.parentGrid.Items.Count)
                {
                    commandList.Clear();
                    commandList.Add(RadGridViewCommands.MoveDown);
                    commandList.Add(RadGridViewCommands.SelectCurrentUnit);
                }
            }

            if (key == Key.Enter)
            {
                commandList.Clear();

                commandList.Add(RadGridViewCommands.ExpandHierarchyItem);
            }

            return commandList;
        }
    }
}

If I am starting at the combobox on the form, then the desired functionality would be to only press Tab 4 times to return back to the combobox. But tabbing into the grid does not show the first row as selected. And tabbing in the last row just moves the selected cell until it reaches the end and then proceeds to the button.

I have been spinning my wheels trying to get this to work. Any help would be greatly appreciated.

Thanks,
Brian 

[Brian]

I figured out what to do to get the Enter key to expand and collapse the grid details for a row. I changed the handling of the Enter key in the keyboard command provider to the following:

if (key == Key.Enter)
{
    commandList.Clear();

    var item = this.parentGrid.ItemContainerGenerator.ContainerFromItem(this.parentGrid.SelectedItem);

    if (item is GridViewRow)
    {
        var gvr = item as GridViewRow;
        gvr.DetailsVisibility = gvr.DetailsVisibility.GetValueOrDefault(Visibility.Collapsed) == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed;
    }
}

[Dimitrina]

Hello Brian,

I am glad to hear that you have resolved one of your problems.

I am not sure what does it mean to have the focus on the entire row. Would you please give more details on that?

As to your second requirement, you can achieve it when you skip the tabbing for the rest of the columns. For example if "column" is one of the columns, then the code would look like: 

column.TabStopMode = GridViewTabStop.Skip;

The property TabStopMode is new and it is available with our latest version. 

Regards,
Didie
the Telerik team