Close button on RadTabControl

2 posts, 0 answers
  1. Adam
    Adam avatar
    4 posts
    Member since:
    Dec 2012

    Posted 25 Jan 2013 Link to this post

    Hi, I've seen your demo How to Add Close Button to the Tab Headers and I works fine but I cannot make it works when I inject other views (UserControl) as a tab on RadTabControl. 

    The simplest way to show this is:
    a) that works fine (when using TabItemsModel)
    tabControl.ItemsSource = tabItemsModel;

    b) that will not work (tabs works and looks normal - without any customization from ClosableStyle)
    <telerik:RadTabControl x:Name="tabControl" ItemContainerStyle="{StaticResource ClosableStyle}">
        <telerik:RadTabItem Header="One"></telerik:RadTabItem>
        <telerik:RadTabItem Header="Two"></telerik:RadTabItem>
        <telerik:RadTabItem Header="Three"></telerik:RadTabItem>
    </telerik:RadTabControl>

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Jan 2013 Link to this post

    Hi Adam,

    The solution demonstrated in the documentation demonstrates a data-binding scenario in which the RadTabItem containers are dynamically generated to wrap the business data. This is why in this scenario you need to apply a HeaderTemplate and ContentTemplate on each RadTabItem. Otherwise, the control won't know how to visualize the data items.

    However, when the control is declaratively populated with items in XAML, then the DataTemplates won't be applied on the items as they have a defined Header property. You need to have in mind that a DataTemplate is only applied on a property which is bound to a data object.

    So in your case, you just need to place the close button in the header of each tab:
    <telerik:RadTabControl x:Name="tabControl">
        <telerik:RadTabItem>
            <telerik:RadTabItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <ContentControl Content="Tab 1" />
                    <telerik:RadButton Grid.Column="1" Width="16" Height="16" Margin="3 0 0 0"
                            HorizontalAlignment="Center" VerticalAlignment="Center" Content="x"
                            example:RoutedEventHelper.EnableRoutedClick="True" Padding="0" />
                </Grid>
            </telerik:RadTabItem.Header>
            <TextBlock VerticalAlignment="Center" Text="Content of Tab 1" TextAlignment="Center" />
        </telerik:RadTabItem>
        ...
    </telerik:RadTabControl>

    I attached a sample solution demonstrating this approach, so please give it a try and let me know if it helps.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
Back to Top