Tabbing between controls in a datatemplate

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Mar 2012

    Posted 18 May 2012 Link to this post

    Hi,

    I have a treeview, with a hierarchical datatemplate, and then sub items are rendered with a data template which has a couple of text boxes for editing info on the treeview items. 

    When I'm in the first textbox and press the tab key I want focus to move to the second textbox, but instead it jumps out of the treeview. How can I get this to work?

    Here's what my datatemplate looks like:

    <DataTemplate x:Key="GoverningBodyTemplate">
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center">Enrolment No:</TextBlock>
                        <TextBox VerticalAlignment="Center" Text="{Binding Path=EnrolmentNumber}" Width="100"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Visibility="{Binding Path=GoverningBody.RequiresBranch, Converter={StaticResource BoolToVisibilityConverter}}">
                        <TextBlock VerticalAlignment="Center">Branch No:</TextBlock>
                        <TextBox VerticalAlignment="Center" Text="{Binding Path=BranchNumber}" Width="100" TabIndex="1"/>
                    </StackPanel>        
                </StackPanel>
            </DataTemplate>

    Any help would be greatly appreciated!

    John
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 23 May 2012 Link to this post

    Hello John,

     You can use the PreviewKeyDown event of the TextBoxes and implement your own focus logic. For example like so:

    <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock VerticalAlignment="Center">Enrolment No:</TextBlock>
                    <TextBox VerticalAlignment="Center" Text="{Binding Path=ID}" Width="100" TabIndex="1" PreviewKeyDown="TextBox_PreviewKeyDown" />
                </StackPanel>
                <StackPanel Orientation="Horizontal"
    private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Tab)
        {
            (((((sender as TextBox).Parent as StackPanel).Parent as StackPanel).Children[1] as StackPanel).Children[1] as TextBox) .Focus();
            e.Handled = true;
        }
    }
    Similarly, you can use the event handler of the second TextBox and implement logic that moves the focus to the TextBox in the Template of the next RadTreeViewItem.
    Hope this helps you. Kind regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top