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

Strange TabNavigation on first and last cell

5 Answers 142 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Arthur
Top achievements
Rank 1
Arthur asked on 20 Nov 2014, 05:01 PM
Hi,

I have strange tab navigation here:

When
   - the first cell in grid is current and the user presses <Shift>+<Tab> the GridView is focused
   - if the last cell in grid is current and the user presses <Tab> the GridView is focused

Normally I would expect that the first focusable element before the GridView or after the GridView is focused, but not the GridView itself. I would like to hide the focus visual on the GridView, but if the GridView is focused, the user looses orientation without a focus visual.

I have tried to make the GridView Focusable="false". This does not work, because the implementation expects the GridView to be focusable. Otherwise other things do not work.

What seems to be strange is that the GirdView moves the focus correctly in the first place but afterwards a second tab navigation routine is executed in the .NET core, that moves the focus again to the GridView. It seems that the KeyDown event is not marked as Handled in these cases and the focus moves twice. Is this behavior caused on our side or is it a bug? Thx.

5 Answers, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 24 Nov 2014, 12:50 PM
Hello,

Generally, the focusing should work similarly to how you expect it to. I performed some tests based on your description and I attached my sample project for a reference. Would you please check it and guide me on how to reproduce the not expected behavior? Have you eventually redefined the default keyboard actions somewhere in your implementation?

Regards,
Dimitrina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Arthur
Top achievements
Rank 1
answered on 24 Nov 2014, 01:59 PM
Hi, 

the first use case works in your plain example. Just select the first cell with your mouse and try to focus the button above the grid by pressing <Shift>+<Tab>. I have to press it twice. After the first press the grid is focused (can be seen with snoop or by searching for the focus visual on the grid border).

The second use case, I cannot reproduce on the plain example. Have to dig deeper there.
0
Arthur
Top achievements
Rank 1
answered on 24 Nov 2014, 02:26 PM
OK, now for the second use case. Use this code instead, it minimalisticaly reflects our structure:

<Window x:Class="RGV_Focus.MainWindow"
        xmlns:my="clr-namespace:RGV_Focus"
        Title="MainWindow" Height="700" Width="700">
    <Window.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </Window.Resources>
  
    <Grid DataContext="{StaticResource MyViewModel}">
        <Grid.Resources>
            <DataTemplate x:Key="RowDetailsTemplate">
                <telerik:RadGridView Name="playersGrid"
                                    ItemsSource="{Binding Players}"
                                    AutoGenerateColumns="False">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Number}"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Position}"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Country}"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>
            </DataTemplate>
        </Grid.Resources>
             
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <telerik:RadGridView
                        Name="clubsGrid"
                        ItemsSource="{Binding Clubs}"
                        AutoGenerateColumns="False"
                        TabIndex="0"
                        RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                        Margin="5">
 
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                                        Header="Est."
                                        DataFormatString="{}{0:yyyy}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                                        Header="Stadium"
                                        DataFormatString="{}{0:N0}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
 
        <telerik:RadGridView
                            Grid.Row="1"
                            Name="clubsGrid2"
                            ItemsSource="{Binding Clubs}"
                            AutoGenerateColumns="False"
                            TabIndex="1"
                            RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                            Margin="5">
 
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                                            Header="Est."
                                            DataFormatString="{}{0:yyyy}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                                            Header="Stadium"
                                            DataFormatString="{}{0:N0}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

Now:
1. Select last cell in first grid
2. Press <TAB>

Instead of selecting first cell in second grid, the first grid is selected.
0
Arthur
Top achievements
Rank 1
answered on 24 Nov 2014, 02:29 PM
Additional note: If you put the last call into edit mode before pressing <TAB>, the behavior changes.
0
Dimitrina
Telerik team
answered on 27 Nov 2014, 01:01 PM
Hi,

You are indeed right. On the first issue I can suggest you is configuring RadGridView with IsTabStop="False". That way you will be able to move up to the control above RadGridView with a single Shift+Tab combination. The drawback is that you will not be able to tab inside RadGridView anymore, you can only click inside it in order to focus any element.
As to the second issue, I understood the case as I tested with the xaml you shared. You have set TabIndex="0" and TabIndex="1" for the two RadGridViews. If I remove those configurations, then I get the following result:
1. Select last cell in first grid
2. Press <TAB>
3. Focus on current cell second grid

In this case while having TabIndexes specified, I am afraid there is no solution I can suggest in order to avoid tab stopping in RadGridView. I apologize for this inconvenience.

Regards,
Dimitrina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
GridView
Asked by
Arthur
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Arthur
Top achievements
Rank 1
Share this question
or