tab inside radlistbox item

6 posts, 1 answers
  1. Olivier Constance
    Olivier Constance avatar
    6 posts
    Member since:
    Jul 2009

    Posted 28 Jan 2014 Link to this post

    Hello
    i have a radlistbox with an item data template, containing, textbox, other controls and an other RadListBox
    this second RadListBox also have an itemDataTemplate containing some Textboxs.

    The fact is that i want to be able to use tab to switch focus on the differrents textbox inside a radlistBox item.

    But each time i have a text box focused and i press "tab". The main RadListBox lost focus.

    What should i do to enable tabbing between textBox inside a RadListBox item

    here is the code of the radListBox

    [code]
    <telerik:RadListBox Name="ListBoxDeclinaisons" Background="AntiqueWhite" ItemsSource="{Binding listeDeclinaison}"  >
                                    
                                    <telerik:RadListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Border BorderBrush="Brown" BorderThickness="1" Margin="5">
                                                <Grid Background="Bisque">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="40"></RowDefinition>
                                                        <RowDefinition></RowDefinition>
                                                    </Grid.RowDefinitions>
                                                    <Grid Grid.Row="0">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition></ColumnDefinition>
                                                            <ColumnDefinition Width="50"></ColumnDefinition>
                                                        </Grid.ColumnDefinitions>
                                                        <TextBox Name="TextBoxLibelleDeclinaison" FontSize="16" FontWeight="Bold" Text="{Binding LIBELLE}" Grid.Column="0" Margin="5"></TextBox>
                                                        <telerik:RadButton Visibility="{Binding POSSEDE_DM, Converter={StaticResource booleanToVisibility}}" Name="ButtonDMDeclinaison" Grid.Column="1" Margin="5" Click="ButtonDMDeclinaison_Click" >DM</telerik:RadButton>
                                                        
                                                    </Grid>
                                                    <Grid Grid.Row="1">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="100"></ColumnDefinition>
                                                            <ColumnDefinition Width="100"></ColumnDefinition>
                                                            <ColumnDefinition Width="100"></ColumnDefinition>
                                                            <ColumnDefinition></ColumnDefinition>
                                                            
                                                        </Grid.ColumnDefinitions>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="auto"></RowDefinition>
                                                            <RowDefinition Height="auto"></RowDefinition>
                                                            <RowDefinition Height="auto"></RowDefinition>
                                                            <RowDefinition Height="auto"></RowDefinition>
                                                            <RowDefinition Height="auto"></RowDefinition>
                                                            <RowDefinition></RowDefinition>
                                                        </Grid.RowDefinitions>
                                                        <Label Grid.Row="0" Grid.Column="0">ID SDMO</Label>
                                                        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding ID_SDMO}"></TextBox>
                                                        <Label Grid.Row="1" Grid.Column="0">Code Standard</Label>
                                                        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding CODE_STANDARD}"></TextBox>
                                                        <Label Grid.Row="2" Grid.Column="0">Temps de Montage</Label>
                                                        <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding TEMPSMONTAGE}"></TextBox>
                                                        <Label Grid.Row="3" Grid.Column="0">Prix TI</Label>
                                                        <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding PRIXTI}"></TextBox>
                                                        <Label Grid.Row="4" Grid.Column="0">Jetons</Label>
                                                        <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding QUANTITE_JETON}"></TextBox>
                                                        <Label Grid.Row="0" Grid.Column="2"><Hyperlink IsEnabled="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}"  Click="ButtonAvertissementDeclinaison_Click_1">Avertissement</Hyperlink></Label>
                                                        <!--<telerik:RadButton Name="ButtonAvertissementDeclinaison" Click="ButtonAvertissementDeclinaison_Click_1" Grid.Row="1" Grid.Column="3">Modifier</telerik:RadButton>-->
                                                        <Label Grid.Row="1" Grid.Column="2">
                                                            <Hyperlink IsEnabled="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}"  Click="ButtonCommentaireDeclinaison_Click_1" >Commentaire</Hyperlink>
                                                        </Label>
                                                        <!--<telerik:RadButton Name="ButtonCommentaireDeclinaison" Click="ButtonCommentaireDeclinaison_Click_1"  Grid.Row="2" Grid.Column="3">Modifier</telerik:RadButton>-->
                                                        <Label Grid.Row="2" Grid.Column="2">
                                                            <Hyperlink IsEnabled="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}" Click="ButtonAideDeclinaison_Click_1" >Aide</Hyperlink>
                                                        </Label>
                                                        <Label Grid.Row="3" Grid.Column="2">
                                                            <Hyperlink Name="HyperlinkApplicabiliteGE" IsEnabled="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}" Click="HyperlinkApplicabiliteGE_Click" >Applicabilité</Hyperlink>
                                                        </Label>
                                                        <!--<telerik:RadButton Name="ButtonAideDeclinaison" Click="ButtonAideDeclinaison_Click_1" Grid.Row="3" Grid.Column="3">Modifier</telerik:RadButton>-->
                                                        <telerik:RadListBox Grid.Column="3" Grid.Row="0" Grid.RowSpan="6" ItemsSource="{Binding listeConstituants_Prix}" Margin="5,0,0,0">
                                                            <telerik:RadListBox.ItemTemplateSelector>
                                                                <telerik:ConditionalDataTemplateSelector>
                                                                    <telerik:DataTemplateRule Condition="CONSTITUANT.QUANTIFIABLE">
                                                                        <DataTemplate >
                                                                            <Grid >
                                                                                <Grid.ColumnDefinitions>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                </Grid.ColumnDefinitions>
                                                                                <Label Grid.Column="0">
                                                                                    <Hyperlink Name="HyperlinkConstituant" Click="HyperlinkConstituant_Click" IsEnabled="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}">
                                                                                        <TextBlock Text="{Binding CONSTITUANT.LIBELLE}"></TextBlock>
                                                                                    </Hyperlink>
                                                                                </Label>
                                                                                <!--<Label Grid.Column="0" Content="{Binding CONSTITUANT.LIBELLE}"></Label>-->
                                                                                <TextBox KeyboardNavigation.TabIndex="0" Name="TextBoxCoutUnitConstitDecli" Grid.Column="1" Text="{Binding COUTUNIT, UpdateSourceTrigger=PropertyChanged}"  
                                                                                 LostKeyboardFocus="TextBoxCoutUnitConstitDecli_LostKeyboardFocus_1" PreviewTextInput="TextBoxCoutUnitConstitDecli_PreviewTextInput_1"  ></TextBox>
                                                                                <TextBox KeyboardNavigation.TabIndex="1" Grid.Column="2" Name="textBoxQuantiteConstit" Text="{Binding QUANTITE,UpdateSourceTrigger=PropertyChanged }"
                                                                                         PreviewTextInput="textBoxQuantiteConstit_PreviewTextInput_1" LostKeyboardFocus="TextBoxCoutUnitConstitDecli_LostKeyboardFocus_1" ></TextBox>
                                                                                <Label Grid.Column="3" Content="{Binding CONSTITUANT.UNITE}"></Label>
                                                                            </Grid>
                                                                        </DataTemplate>
                                                                    </telerik:DataTemplateRule>
                                                                    <telerik:DataTemplateRule Condition="CONSTITUANT.QUANTIFIABLE=false">
                                                                        <DataTemplate>
                                                                            <Grid>
                                                                                <Grid.ColumnDefinitions>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                    <ColumnDefinition></ColumnDefinition>
                                                                                </Grid.ColumnDefinitions>
                                                                                <Label Grid.Column="0" Content="{Binding CONSTITUANT.LIBELLE}"></Label>
                                                                                <TextBox KeyboardNavigation.TabIndex="0" Name="TextBoxCoutUnitConstitDecli" Grid.Column="1" Text="{Binding COUTUNIT, UpdateSourceTrigger=PropertyChanged}"  
                                                                                 LostKeyboardFocus="TextBoxCoutUnitConstitDecli_LostKeyboardFocus_1" PreviewTextInput="TextBoxCoutUnitConstitDecli_PreviewTextInput_1"  ></TextBox>
                                                                            </Grid>
                                                                        </DataTemplate>
                                                                    </telerik:DataTemplateRule>
                                                                </telerik:ConditionalDataTemplateSelector>
                                                            </telerik:RadListBox.ItemTemplateSelector>
                                                            <!--<telerik:RadListBox.ItemTemplate>
                                                                <DataTemplate>
                                                                    <Grid>
                                                                        <Grid.ColumnDefinitions>
                                                                            <ColumnDefinition></ColumnDefinition>
                                                                            <ColumnDefinition></ColumnDefinition>
                                                                            <ColumnDefinition></ColumnDefinition>
                                                                            <ColumnDefinition></ColumnDefinition>
                                                                        </Grid.ColumnDefinitions>
                                                                        <Label Grid.Column="0" Content="{Binding CONSTITUANT.LIBELLE}"></Label>
                                                                        <TextBox Name="TextBoxCoutUnitConstitDecli" Grid.Column="1" Text="{Binding COUTUNIT, UpdateSourceTrigger=PropertyChanged}"  
                                                                                 LostKeyboardFocus="TextBoxCoutUnitConstitDecli_LostKeyboardFocus_1" PreviewTextInput="TextBoxCoutUnitConstitDecli_PreviewTextInput_1"  ></TextBox>
                                                                        <TextBox Grid.Column="2" Name="textBoxQuantiteConstit" Text="{Binding QUANTITE}" PreviewTextInput="textBoxQuantiteConstit_PreviewTextInput_1"></TextBox>
                                                                        <Label Grid.Column="3" Content="{Binding CONSTITUANT.UNITE}"></Label>
                                                                    </Grid>
                                                                </DataTemplate>
                                                            </telerik:RadListBox.ItemTemplate>-->
                                                        </telerik:RadListBox>
                                                    </Grid>
                                                </Grid>
                                            </Border>
                                        </DataTemplate>
                                    </telerik:RadListBox.ItemTemplate>
                                    
                                </telerik:RadListBox>
    [/code]
  2. Answer
    Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 31 Jan 2014 Link to this post

    Hello,

    In order to achieve a Tab navigation that is restricted inside a ListBoxItem you will need to set the TabNavigation attached property to the wrapper of the controls placed in the custom DataTemplate to Cycle. For example if you have a DataTemplate that has a StackPanel in which you have placed multiple controls you should set the KeyboardNavigation.TabNavigation="Cycle" to that StackPanel.

    I created and attached a sample project of the described approach for you, hope this is helpful.

    Regards,
    Vladi
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Olivier Constance
    Olivier Constance avatar
    6 posts
    Member since:
    Jul 2009

    Posted 31 Jan 2014 in reply to Vladi Link to this post

    That's exactly what i was looking for!

    Thank You . :)

    Regards
  5. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Jun 2015

    Posted 11 Jan in reply to Vladi Link to this post

    Vladi said:Hello,

    In order to achieve a Tab navigation that is restricted inside a ListBoxItem you will need to set the TabNavigation attached property to the wrapper of the controls placed in the custom DataTemplate to Cycle. For example if you have a DataTemplate that has a StackPanel in which you have placed multiple controls you should set the KeyboardNavigation.TabNavigation="Cycle" to that StackPanel.

    I created and attached a sample project of the described approach for you, hope this is helpful.

    Regards,
    Vladi
    Telerik
     
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
     

     

    Hi, what do I have to change to achieve following behaviour for the given example project:
    Item1.Name is focussed > Tabkey pressed > Item1.Id is focussed > Tabkey > InnerItem1.Name focussed > TabKey > InnerItem1.Id > Tabkey -> InnerItem2.Name ...
    The behaviour in the example is that it cycles only between InnerItem1 and Item 1, could not get to inneritem2 of Item1 or InnerItem1 of Item 2 via tab key.
    I want to navigate with tabkey from Item1 to InnerItem1, InnerItem2 ... InnerItem4.
    Furthermore, I want that after InnerItem4 is focussed and the next tabkey, focus should go to Item2 and then after the next tab to the inner items of 2 and so on ...
    How can this be achieved?

  6. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 12 Jan Link to this post

    Hi Nicolas,

    In order to achieve the described tab navigation when having a nested RadListBox scenario you could take advantage of the WTF framework's Local and Continue TabNavigation values. What you should do is set the RadListBox control's with KeyboardNavigation.TabNavigation="Local" and set the KeyboardNavigation.TabNavigation="Continue" to the Panels in their ItemTemplate. The next code snippet shows the described approach:
    <telerik:RadListBox Name="ListBoxDeclinaisons"
                Background="AntiqueWhite"
                KeyboardNavigation.TabNavigation="Local"
                Margin="10"
                ItemsSource="{Binding Items}" >
        <telerik:RadListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel KeyboardNavigation.TabNavigation="Continue">
                    <TextBox Text="{Binding Name}"/>
                    <TextBox Text="{Binding Id}"/>
                    <telerik:RadListBox ItemsSource="{Binding InnerItems}"
                                Height="200" Margin="10" Background="LightBlue"
                                KeyboardNavigation.TabNavigation="Local">
                        <telerik:RadListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel KeyboardNavigation.TabNavigation="Continue">
                                    <TextBox Text="{Binding Name}"/>
                                    <TextBox Text="{Binding Id}"/>
                                </StackPanel>
                            </DataTemplate>
                        </telerik:RadListBox.ItemTemplate>
                    </telerik:RadListBox>
                </StackPanel>
            </DataTemplate>
        </telerik:RadListBox.ItemTemplate>
    </telerik:RadListBox>

    Hope this is helpful.


    Regards,
    Vladi
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Jun 2015

    Posted 12 Jan in reply to Vladi Link to this post

    Perfect, thank you very much!
Back to Top
UI for WPF is Visual Studio 2017 Ready