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

tab inside radlistbox item

5 Answers 81 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Olivier Constance
Top achievements
Rank 1
Olivier Constance asked on 28 Jan 2014, 03:27 PM
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]

5 Answers, 1 is accepted

Sort by
0
Accepted
Vladi
Telerik team
answered on 31 Jan 2014, 11:56 AM
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 >>
0
Olivier Constance
Top achievements
Rank 1
answered on 31 Jan 2014, 12:52 PM
That's exactly what i was looking for!

Thank You . :)

Regards
0
Nicolas
Top achievements
Rank 1
answered on 11 Jan 2016, 12:47 PM
[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
 
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 >>
 

[/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?

0
Vladi
Telerik team
answered on 12 Jan 2016, 11:55 AM
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
0
Nicolas
Top achievements
Rank 1
answered on 12 Jan 2016, 12:48 PM
Perfect, thank you very much!
Tags
ListBox
Asked by
Olivier Constance
Top achievements
Rank 1
Answers by
Vladi
Telerik team
Olivier Constance
Top achievements
Rank 1
Nicolas
Top achievements
Rank 1
Share this question
or