Issues with tabbing order with custom column!

[Perlom]

Hi,

I have a custom column which is a user control inheriting from GridViewColumn and has two button (add row, and remove row) basically to allow users who relay to keyboard only for data entry to tab through the row cells until the reach the last column and then have the ability to add a new row and go one with the data entry.

The problem is the tabbing order is not consistent, for example, when the user is row 4 and they are tabbing in though data bound rows, when it comes to the button Colum, it the button on the first row that gets the focus (not the same 4th row).

 

Any advice?

[Perlom]

I was able to reach a somehow reasonable fix by:

- having my user control inheriting from GridViewDataColumn class instead of GridViewColumn
- Add the Add/Remove buttons to CellTemplate and CellEditTemplate
- In the CellTemplate, set the focusable = false, and IsTabStop = false.

 

However, the problem that I want to address is that when tabbing, the focus gets to cell first and then in the next tab the focus gets to the Add button,. I would like to avoid that cell getting the focus step, and instead the focus should be on the Add button directly. I did set the focusable to false on the grid column, but that didn’t solve the issue. Any Suggestion?

Here is the code for my user control.

 

<telerik:GridViewDataColumn xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             x:Class="Controls.RmpGridViewButtonColumn"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:Controls="clr-namespace:Controls" mc:Ignorable="d" >

    <telerik:GridViewDataColumn.Resources>
        <Style x:Key="GridButtonStyle" TargetType="{x:Type telerik:RadButton}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="1" />
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Blue" BlurRadius="10" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Blue" BlurRadius="10" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="GridImageStyle" TargetType="{x:Type Image}">
            <Setter Property="Width" Value="16" />
            <Setter Property="Height" Value="16" />
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Yellow" BlurRadius="10" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Yellow" BlurRadius="10" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </telerik:GridViewDataColumn.Resources>

    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <telerik:RadButton Grid.Column="0" Command="New" TabIndex="0" CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type Controls:RmpGridView}}}"
                                   Style="{StaticResource GridButtonStyle}" ToolTip="Add New" IsTabStop="False" Focusable="False" >
                <telerik:RadButton.Content>
                        <Image Source="Images\add-icon16x16.png" Style="{StaticResource GridImageStyle}" />
                    </telerik:RadButton.Content>
                </telerik:RadButton>
                <!--telerik:RadGridViewCommands.Delete-->
                <telerik:RadButton Grid.Column="1" Command="Delete" TabIndex="1" CommandParameter="{Binding}"
                                   Style="{StaticResource GridButtonStyle}" ToolTip="Delete" IsTabStop="False" Focusable="False" >
                    <telerik:RadButton.Content>
                        <Image Source="Images\remove-icon16x16.png" Style="{StaticResource GridImageStyle}"   />
                    </telerik:RadButton.Content>
                </telerik:RadButton>
            </Grid>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
    <telerik:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <telerik:RadButton Grid.Column="0" Command="New" TabIndex="0" CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type Controls:RmpGridView}}}"
                                   Style="{StaticResource GridButtonStyle}" ToolTip="Add New" Focusable="True" >
                    <telerik:RadButton.Content>
                        <Image Source="Images\add-icon16x16.png" Style="{StaticResource GridImageStyle}" />
                    </telerik:RadButton.Content>
                </telerik:RadButton>
                <!--telerik:RadGridViewCommands.Delete-->
                <telerik:RadButton Grid.Column="1" Command="Delete" TabIndex="1" CommandParameter="{Binding}"
                                   Style="{StaticResource GridButtonStyle}" ToolTip="Delete" Focusable="True">
                    <telerik:RadButton.Content>
                        <Image Source="Images\remove-icon16x16.png" Style="{StaticResource GridImageStyle}"  />
                    </telerik:RadButton.Content>
                </telerik:RadButton>
            </Grid>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn >

[Ivan Ivanov]

Hi Perlom,

I have prepared an example project that illustrates a possible solution for this scenario. Please, refer to the attached project and let us know whether this approach meets your requirements.

Kind regards,
Ivan Ivanov
the Telerik team

[Perlom]

 

Hi Ivan,

Thank you for your reply. Your solution works perfectly if the column has one button,. However when I added the second button, the focus always stays in the cell and never leavers to the following one. I have tried to make few changes to you example but no luck. Any suggestion how to do the same for column with multiple buttons?

public class MyButtonColumn : Telerik.Windows.Controls.GridViewColumn
{
    private static bool isFocusOn;
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
    {
        cell.GotFocus += new RoutedEventHandler(cell_GotFocus);
        cell.LostFocus += new RoutedEventHandler(cell_LostFocus);

        var stackPanel = cell.Content as StackPanel;
        if (stackPanel == null)
        {
            stackPanel = new StackPanel {Orientation = Orientation.Horizontal};


            var button = new RadButton {Content = "Add", Name = "btnAdd"};
            button.Click += new RoutedEventHandler(button_Click);
            stackPanel.Children.Add(button);
            button = new RadButton { Content = "Remove", Name = "btnRemove" };
        }

        return stackPanel;
    }

    void cell_LostFocus(object sender, RoutedEventArgs e)
    {
        isFocusOn = false;
    }

    void button_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Clicked!");
    }

    void cell_GotFocus(object sender, RoutedEventArgs e)
    {
        if (!isFocusOn)
        {
        (sender as GridViewCell).ChildrenOfType<RadButton>().First(btn => btn.Name == "btnAdd").Focus();
            isFocusOn = true;
        }
    }

[Perlom]

Hi Ivan,

Thank you for your reply. Your solution works perfectly if the column has one button,. However when I added the second button, the focus always stays in the cell and never leavers to the following one. I have tried to make few changes to you example but no luck. Any suggestion how to do the same for column with multiple buttons?

 I also have issues with tabbing order in custom footer, as some columns footers in my grid have textboxes. When I click on one of those textboxes and then press tab, I want the focus to be on the next textbox on the footer row. Instead the focus moves, to the first cell in the grid!! However, if the I tabbed my way through all cells in the grid, and then reached to the textboxes in the footer, then the tab order works perfectly. As if the tab has to go through a certain sequence or tab index!! Any help is appreciated!

Footer Row:

------------------------------------------------------------------------------------------------------------

- F.Col1 - <textbox1> - f.col2 - <textbox2> - f.col3 - <textbox3>

-            -                     -           -                   -           -

-             -                     -           -                   -           -

------------------------------------------------------------------------------------------------------------

[Ivan Ivanov]

Hi Perlom,

Please excuse me for the late reply. Having such a configuration changes things a lot. Please, let me propose you an alternative approach that should be working fine in your scenario. I am attaching a demo project for your reference.

All the best,
Ivan Ivanov
the Telerik team