ComboBox IsEditable TabIndex doesn't work

3 posts, 0 answers
  1. Will
    Will avatar
    7 posts
    Member since:
    May 2014

    Posted 08 Sep 2015 Link to this post

    I attached a small project illustrating a problem. I have combo boxes and text boxes on the control. When I do not apply any properties on my components and start the application my tab order is perfectly fine. I hit tab and it goes to first combo cox then to cext etc. Exactly the way tab index is set up. But as soon as I add property IsEditable="true" to my combo box it messes it up. When I start application it omits combo box and it goes straight to text box, then it omits another combo box and it goes again straight to text box. Please advice how to fix this tab problem issue. I want to have this editable and have tab index going top down and left right.

    Second question. I applied style with ThemeType=telerikControls:Windows8Theme how can I have yellow rectangle around the focused combo box this theme gives gray one which is very hard to recognize.

     <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:TestTelerikTabStop"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="TestTelerikTabStop.MainWindow"
        xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <!-- Please comment in and out IsEditable property to see effect on tabindex
                 Please help yelow rectangle on focused combobox in Windows8Theme theme
            -->
            <Style x:Key="RadComboBoxStyle" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerikControls:Windows8Theme, ElementType=telerik:RadComboBox}}" TargetType="telerik:RadComboBox">
                <Setter Property="Height" Value="23" />
                <Setter Property="FontFamily" Value="Calibri"/>
                <Setter Property="ClearSelectionButtonContent" Value="Clear"/>
                <Setter Property="ClearSelectionButtonVisibility" Value="Visible"/>
                <Setter Property="IsEditable" Value="True"/>    
                <Setter Property="IsReadOnly" Value="True"/>
                <Setter Property="Focusable" Value="True"/>
            </Style>
        </Window.Resources>
        <DockPanel DockPanel.Dock="Top">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="265"/>
                    <ColumnDefinition Width="Auto" MinWidth="517"/>
                    <ColumnDefinition Width="Auto" MinWidth="517"/>
                </Grid.ColumnDefinitions>

                <telerik:RadComboBox x:Name="radComboBox" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" TabIndex="0" IsTabStop="True"  Style="{StaticResource RadComboBoxStyle}" Width="131">
                    <telerik:RadComboBoxItem Content="Adam"/>
                    <telerik:RadComboBoxItem Content="Alex"/>
                    <telerik:RadComboBoxItem Content="Andrew"/>
                </telerik:RadComboBox>
                <telerik:RadComboBox x:Name="radComboBox1" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" TabIndex="2" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Margin="0,1" Width="131">
                </telerik:RadComboBox>
                <telerik:RadComboBox x:Name="radComboBox2" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" TabIndex="3" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Width="143">
                </telerik:RadComboBox>
                <telerik:RadComboBox x:Name="radComboBox3"  Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" TabIndex="5" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Margin="0,1" Width="143">
                </telerik:RadComboBox>
                <TextBox  Grid.Row="1" Grid.Column="0" Margin="0,0,134,0" TabIndex="1"/>
                <TextBox  Grid.Row="1" Grid.Column="1" Margin="0,0,374,0" TabIndex="4"/>

            </Grid>
        </DockPanel>
    </Window>

  2. Nasko
    Admin
    Nasko avatar
    586 posts

    Posted 09 Sep 2015 Link to this post

    Hi Will,

    I will go straight to your questions:

    1. Based on the provided description we were able to reproduce the observed by you behavior. So, in order to achieve the desired one you need to set the TabNavigation attached property to "Local" for each RadComboBox - thus the navigation should be working as expected.

    2. In order to achieve the desired appearance of RadComboBox when it gets focused you need to modify the default editable Template of the control. By setting the desired BorderBrush for the Border named x:Name="FocusBorder" the desired appearance could be achieved.

    We have created a sample project that demonstrates the described above approaches and you could run and evaluate it - please, notice that Implicit Styles have been used.

    We hope this will help you.

    Regards,
    Nasko
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Will
    Will avatar
    7 posts
    Member since:
    May 2014

    Posted 09 Sep 2015 Link to this post

    Thank you,

    That fixed my issues.

    Regards,

Back to Top