tab inside radlistbox item

[Olivier Constance]

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]

[Vladi]

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

[Olivier Constance]

That's exactly what i was looking for!

Thank You . :)

Regards

[Nicolas]

[quote]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

 

 

[/quote]

 

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?

[Vladi]

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

[Nicolas]

Perfect, thank you very much!