Tabs in multiple rows

8 posts, 1 answers
  1. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 07 Dec 2009 Link to this post

    Hi,

           I have custom templated RadTabControl with RadTabItems. The control has fixed width and tab items are all in the same line.
    If there is too many tab items the text in tab headers are cut from the right. It can't be seen whole. The only solution for me is to
    split tab items into the two lines, but I don't know how. I tried with placing RadTabItems in two horizontal stack panels one beneath the other with no luck. In such situation the RadTabItem content is not shown at all. Could you help me with this issue? 

     

     

    <!--Tab Item Top Template--> 
     
    <ControlTemplate x:Key="TabItemTopTemplate"   
     
    TargetType="telerikNav:RadTabItem">  
     
    <Grid x:Name="wrapper">  
     
    <VisualStateManager.VisualStateGroups> 
     
    <VisualStateGroup x:Name="CommonStateGroup">  
     
    <VisualState x:Name="MouseOver">  
     
    <Storyboard> 
     
    <ObjectAnimationUsingKeyFrames   
     
    Storyboard.TargetProperty="Border.Background"   
     
    Storyboard.TargetName="InnerFill">  
     
    <DiscreteObjectKeyFrame KeyTime="0:0:0.0"   
     
    Value="{StaticResource TabItemMouseOverBackground}" /> 
     
    </ObjectAnimationUsingKeyFrames> 
     
    </Storyboard> 
     
    </VisualState> 
     
    <VisualState x:Name="Normal" /> 
     
    <VisualState x:Name="Selected">  
     
    <Storyboard> 
     
    <ObjectAnimationUsingKeyFrames   
     
    Storyboard.TargetProperty="Border.Background"   
     
    Storyboard.TargetName="InnerFill">  
     
    <DiscreteObjectKeyFrame KeyTime="0:0:0.0"   
     
    Value="{StaticResource TabItemSelectInnerBorder}" /> 
     
    </ObjectAnimationUsingKeyFrames> 
     
    <ObjectAnimationUsingKeyFrames   
     
    Storyboard.TargetProperty="Foreground"   
     
    Storyboard.TargetName="HeaderElement">  
     
    <DiscreteObjectKeyFrame KeyTime="0:0:0.0"   
     
    Value="{StaticResource TabItemSelectForeground}" /> 
     
    </ObjectAnimationUsingKeyFrames> 
     
    </Storyboard> 
     
    </VisualState> 
     
    <VisualState x:Name="Disabled">  
     
    <Storyboard> 
     
    <DoubleAnimation Storyboard.TargetProperty="Opacity"   
     
    Storyboard.TargetName="HeaderElement" To="0.5"   
     
    Duration="0:0:0.0" /> 
     
    </Storyboard> 
     
    </VisualState> 
     
    </VisualStateGroup> 
     
    <VisualStateGroup x:Name="FocusStates">  
     
    <VisualState x:Name="Unfocused" /> 
     
    <VisualState x:Name="Focused" /> 
     
    </VisualStateGroup> 
     
    </VisualStateManager.VisualStateGroups> 
     
    <Border x:Name="InnerFill" 
     
    BorderBrush="{StaticResource TabItemInnerBorder}" BorderThickness="1" 
     
    Background="{StaticResource TabItemBackground}">  
     
    <!--Content--> 
     
    <navPrimitive:TabItemContentPresenter x:Name="HeaderElement"   
     
    Content="{TemplateBinding Header}"   
     
    ContentTemplate="{TemplateBinding HeaderTemplate}"   
     
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"   
     
    Foreground="{TemplateBinding Foreground}"   
     
    Margin="{TemplateBinding Padding}" /> 
     
    </Border> 
     
    </Grid> 
     
    </ControlTemplate> 
     
    <!--Tab Control Template--> 
     
    <ControlTemplate x:Key="TabControlTopTemplate"   
     
    TargetType="telerikNav:RadTabControl">  
     
    <Grid> 
     
    <VisualStateManager.VisualStateGroups> 
     
    <VisualStateGroup x:Name="CommonStates">  
     
    <VisualState x:Name="Disabled">  
     
    <Storyboard /> 
     
    </VisualState> 
     
    <VisualState x:Name="Normal" /> 
     
    </VisualStateGroup> 
     
    </VisualStateManager.VisualStateGroups> 
     
    <Grid.RowDefinitions> 
     
    <RowDefinition Height="auto" /> 
     
    <RowDefinition Height="*" /> 
     
    </Grid.RowDefinitions> 
     
    <!--Content--> 
     
    <Border BorderThickness="0"   
     
    BorderBrush="{StaticResource TabControlDarkerBorder}"   
     
    CornerRadius="0"   
     
    Grid.Row="1">  
     
    <ContentPresenter x:Name="ContentElement"   
     
    Content="{TemplateBinding SelectedContent}"   
     
    ContentTemplate="{TemplateBinding SelectedContentTemplate}" /> 
     
    </Border> 
     
    <!--TabStrip--> 
     
    <ItemsPresenter Margin="2 3 0 0"   
     
    x:Name="ItemsPresenterElement" /> 
     
    </Grid> 
     
    </ControlTemplate> 
     

     


    This is the RadTabControl with tabs that should be shown in two lines:

     

    <

     

    telerik:RadTabControl x:Name="tbcAdvancedSearchFields"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabControl}">

     

     

     

     

    <!--Debtor fields-->

     

     

     

     

    <telerik:RadTabItem x:Name="tbciAdvancedSearchFields"

     

     

    Header="{Binding DebtorsFieldsHeaderText}"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

     

     

     

    <custom:AdvancedListBox x:Name="lbFields"

     

     

    ItemsSource="{Binding DebtorsFields}"

     

     

    SelectedItem="{Binding SelectedField, Mode=TwoWay}"

     

     

    DisplayMemberPath="ColumnDef.HeaderName"

     

     

    IsItemEnabledPath="IsFieldEnabled" />

     

     

     

     

    </telerik:RadTabItem>

     

     

     

    <!--Debtor free fields-->

     

     

     

     

    <telerik:RadTabItem x:Name="tbciAdvancedSearchUserFields"

     

     

    Header="{Binding DebtorsFreeFieldsHeaderText}"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

     

     

     

     

    <custom:AdvancedListBox x:Name="lbUserFields"

     

     

    ItemsSource="{Binding DebtorsFreeFields}"

     

     

    SelectedItem="{Binding SelectedField, Mode=TwoWay}"

     

     

    DisplayMemberPath="ColumnDef.HeaderName"

     

     

    IsItemEnabledPath="IsFieldEnabled" />

     

     

     

     

    </telerik:RadTabItem>

     

     

     

    <!--Selections-->

     

     

     

     

    <telerik:RadTabItem x:Name="tbciSelections"

     

     

    Header="{Binding SelectionsHeaderText}"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

     

     

     

     

    <custom:AdvancedListBox x:Name="lbSelections" ItemsSource="{Binding Selections}"

     

     

    SelectedItem="{Binding SelectedSelection, Mode=TwoWay}"

     

     

    DisplayMemberPath="DisplayName"

     

     

    IsEnabled="{Binding IsSelectionEnabled}" />

     

     

     

     

    </telerik:RadTabItem>

     

     

     

     

    <!--Grid specific fields-->

     

     

     

     

    <telerik:RadTabItem Header="{Binding GridSpecificFieldsHeaderText}"

     

     

    Visibility="{Binding IsGridSpecificVisible, Converter={StaticResource VisibilityConverter}}"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

     

     

     

     

    <custom:AdvancedListBox x:Name="lbGridSpecificFields"

     

     

    ItemsSource="{Binding GridSpecificFields}"

     

     

    SelectedItem="{Binding SelectedField, Mode=TwoWay}"

     

     

    DisplayMemberPath="ColumnDef.HeaderName"

     

     

    IsItemEnabledPath="IsFieldEnabled" />

     

     

     

    </telerik:RadTabItem>

     

     

     

    <!--Grid specific free fields-->

     

     

     

     

    <telerik:RadTabItem Header="{Binding GridSpecificFreeFieldsHeaderText}"

     

     

    Visibility="{Binding IsGridSpecificVisible, Converter={StaticResource VisibilityConverter}}"

     

     

    Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

     

     

     

     

    <custom:AdvancedListBox x:Name="lbGridSpecificFreeFields"

     

     

    ItemsSource="{Binding GridSpecificFreeFields}"

     

     

    SelectedItem="{Binding SelectedField, Mode=TwoWay}"

     

     

    DisplayMemberPath="ColumnDef.HeaderName"

     

     

    IsItemEnabledPath="IsFieldEnabled" />

     

     

     

    </telerik:RadTabItem>

     

     

     

     

    </telerik:RadTabControl>

     

     

     

     

     

     

     

     

     

     

  2. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 08 Dec 2009 Link to this post

    Hi Ivan,

     Thank you for your feedback. We have considered this scenario and we will implement it, but for the moment I cannot bind to a specific date. A little trick you can do in this case is, instead of using StackPanel, to use Telerik's WrapPanel(located in Telerik.Windows.Controls.dll), as shown bellow:

    <telerikNavigation:RadTabControl x:Name="tabControl1" Width="500" Height="500" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <telerikNavigation:RadTabControl.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadWrapPanel />
            </ItemsPanelTemplate>
        </telerikNavigation:RadTabControl.ItemsPanel>
    </telerikNavigation:RadTabControl>

    The problem is that if you select an item, the selected tab will not go automatically down:

    Let me know if this works for you.

    Regards,

    Kiril Stanoev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 08 Dec 2009 Link to this post

    Thank you for your answer, it is a quick and simple solution.
  5. James
    James avatar
    136 posts
    Member since:
    Nov 2008

    Posted 15 Dec 2009 Link to this post

    I also look forward to this feature, the RadWrapPanel almost does the trick!
    Regards,
    James.
  6. Jay
    Jay avatar
    4 posts
    Member since:
    Jul 2009

    Posted 21 Dec 2009 Link to this post

    Hi Kiril Stanoev

    What is solution for selected tab will go down?

    Thanks & Regards
    Jaysukh
  7. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 21 Dec 2009 Link to this post

    Hi Jay,

    Currently using a wrap panel will not automatically adjust the row of the selected item as expected.

    Unfortunately our TabPanel does not currently support automatic breaking.

    Sincerely yours,
    Miroslav
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. James
    James avatar
    136 posts
    Member since:
    Nov 2008

    Posted 23 May 2010 Link to this post

    Hello,

    Just out of curiosity, is this feature likely to be implemented soon?

    It would be a great feature!

    James.
  9. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 26 May 2010 Link to this post

    Hello James,

    Yes, it is already implemented. You can use the OverflowMode property like so:

    <telerik:RadTabControl OverflowMode="Wrap">
        <telerik:RadTabItem Header="Tab Item 1" />
        <telerik:RadTabItem Header="Tab Item 2" />
        <telerik:RadTabItem Header="Tab Item 3" />
        <telerik:RadTabItem Header="Tab Item 4" />
        <telerik:RadTabItem Header="Tab Item 5" />
        <telerik:RadTabItem Header="Tab Item 6" />
    </telerik:RadTabControl>

    Regards,
    Miroslav
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
DevCraft banner