[Solved] Tabbing between TextBoxes in RadPanelBar

[haagel]

I have a simple RadPanelBar with ExpandMode="Single" where every item contains a TextBox. Is it possible to enable the user to tab between the TextBoxes?

 

Let's say I have this GUI:

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="25" />

         <RowDefinition Height="10" />

         <RowDefinition Height="200" />

        <RowDefinition Height="10" />

        <RowDefinition Height="25" />

     </Grid.RowDefinitions>


    <TextBox Name="TextBoxA" Grid.Row="0" />


    <telerikControls:RadPanelBar Grid.Row="2" Orientation="Vertical" ExpandMode="Single" >

         <telerikControls:RadPanelBarItem Header="Test 1" IsExpanded="True" >

             <TextBox Name="TextBoxB1" />

         </telerikControls:RadPanelBarItem>

         <telerikControls:RadPanelBarItem Header="Test 2" IsExpanded="True" >

             <TextBox Name="TextBoxB2" />

         </telerikControls:RadPanelBarItem>

     </telerikControls:RadPanelBar>


    <TextBox Name="TextBoxC" Grid.Row="4" />

 </Grid>

 

This is my desired behavior:

1. The user has focus on TextBoxA.
2. The uses presses Tab -> Focus is moved to TextBoxB1
3. The uses presses Tab -> Focus is moved to TextBoxB2, and the corresponding PanelBarItem is expanded
4. The uses presses Tab -> Focus is moved to TextBoxC

 

Is this possible?

[Petar Mladenov]

Hello David Haglund,

You can do like so:

<Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="25" />
           <RowDefinition Height="10" />
           <RowDefinition Height="200" />
           <RowDefinition Height="10" />
           <RowDefinition Height="25" />
       </Grid.RowDefinitions>
       <TextBox Name="TextBoxA" Grid.Row="0" TabIndex="1" IsTabStop="True"/>
       <telerik:RadPanelBar Grid.Row="2" Orientation="Vertical" ExpandMode="Single" IsTabStop="False" Focusable="False">

           <telerik:RadPanelBarItem Header="Test 1" IsExpanded="True" IsTabStop="False" Focusable="False">
               <TextBox Name="TextBoxB1" TabIndex="2" IsTabStop="True"/>
           </telerik:RadPanelBarItem>

           <telerik:RadPanelBarItem Header="Test 2" IsExpanded="True" IsTabStop="False" Focusable="False">
               <TextBox Name="TextBoxB2" TabIndex="3" IsTabStop="True" />
           </telerik:RadPanelBarItem>

       </telerik:RadPanelBar>
       <TextBox Name="TextBoxC" Grid.Row="4" />
   </Grid>

Please let me know if this approach satisfies your needs. We would be glad to assist you further.

Regards,
Petar Mladenov
the Telerik team

[haagel]

Thanks for your reply, but I'm afraid this does not work...

Firstly, I need the the RadPanelBar to have only one item expanded at any time. The whole purpose of using a PanelBar and not just put the TextBoxes in an ordinary StackPanel is to win some space by collapsing all of the TextBoxes but one.

Secondly, even if I do expand all items it still doesn't work as I want it to. When I try to tab between the TextBoxes, there is still some other control taking focus in between. Let's say I have focus in the TextBox of the first item. If I press tab, the focus will go to the next item, but not to the TextBox. Instead some ContentControl gets focus (Snoop tells me that "Header (ContentControl)" has focus, and I see a dashed line around the TextBox). If I press tab again the TextBox gets focus.

I'd really appreciate if you could help me with this, because the current user experience I'm providing is really not good enough.

[Petar Mladenov]

Hello David Haglund,

It appears that IsTabStop property of the RadpanelBarItem doesn`t work as expected in WPF. I logged this in our PITS (PanelBar: IsTabStop property of the RadPanelBarItem doesn`t work in WPF) and updated your telerik points accordingly. However, you could try the approach in the attached sample although it does not fulfil all of your requirements.
Hope this may give you a starting point. Feel free to ask if you need further assistance.

Kind regards,
Petar Mladenov
the Telerik team