Strange TabNavigation on first and last cell

6 posts, 0 answers
  1. Arthur
    Arthur avatar
    22 posts
    Member since:
    Jul 2014

    Posted 20 Nov 2014 Link to this post

    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.
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Nov 2014 Link to this post

    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.

     
  3. Arthur
    Arthur avatar
    22 posts
    Member since:
    Jul 2014

    Posted 24 Nov 2014 in reply to Dimitrina Link to this post

    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.
  4. Arthur
    Arthur avatar
    22 posts
    Member since:
    Jul 2014

    Posted 24 Nov 2014 Link to this post

    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.
  5. Arthur
    Arthur avatar
    22 posts
    Member since:
    Jul 2014

    Posted 24 Nov 2014 in reply to Arthur Link to this post

    Additional note: If you put the last call into edit mode before pressing <TAB>, the behavior changes.
  6. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 27 Nov 2014 Link to this post

    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.

     
Back to Top