Close button in one RadTabItem

[Roy Halvorsen]

I want to ad a close button to 1 out of 2 RadTabItems. The documentation ads the button to all RadTabItems. How can I do this?
My xaml code is as follows (and I want the close button on the second RadTabItem, never the first one):

<telerik:RadTabControl>
<telerik:RadTabItem Header="{Binding ElementName=operationContentControl, Path=Content.DataContext.Header}" IsSelected="{Binding IsOperationSelected, Mode=TwoWay}">
<ContentControl x:Name="operationContentControl" cal:RegionManager.RegionName="{x:Static infrastructure:RegionNames.MainRegion}" /></telerik:RadTabItem>
<telerik:RadTabItem Header="{Binding ElementName=protocolContentControl, Path=Content.DataContext.Header}" IsSelected="{Binding IsProtocolSelected, Mode=TwoWay}" Visibility="{Binding IsProtocolVisible, Converter={StaticResource boolToVisibilityConverter}}">
<ContentControl x:Name="protocolContentControl" cal:RegionManager.RegionName="{x:Static infrastructure:RegionNames.ProtocolRegion}" /><telerik:RadTabItem>
</telerik:RadTabControl>

Regards,
Roy

[Tina Stancheva]

Hello Roy Halvorsen,

You can define a HeaderTemplate for the second TabItem and add the close button there:

<telerik:RadTabControl>
    <telerik:RadTabItem Header="{Binding ElementName=operationContentControl, Path=Content.DataContext.Header}"
                IsSelected="{Binding IsOperationSelected, Mode=TwoWay}">
        <ContentControl x:Name="operationContentControl"
                cal:RegionManager.RegionName="{x:Static infrastructure:RegionNames.MainRegion}" />
    </telerik:RadTabItem>
    <telerik:RadTabItem  IsSelected="{Binding IsProtocolSelected, Mode=TwoWay}"
                 Visibility="{Binding IsProtocolVisible, Converter={StaticResource boolToVisibilityConverter}}">
        <telerikNavigation:RadTabItem.HeaderTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ElementName=protocolContentControl, Path=Content.DataContext.Header}"/>
                <Button Grid.Column="1" Content="x" Width="16"
                                       Height="20" HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       example:RoutedEventHelper.EnableRoutedClick="True" />
            </Grid>
        </telerikNavigation:RadTabItem.HeaderTemplate>
        <ContentControl x:Name="protocolContentControl"
                cal:RegionManager.RegionName="{x:Static infrastructure:RegionNames.ProtocolRegion}" />
    <telerik:RadTabItem>
</telerik:RadTabControl>

Then for the close button can be implemented the logic described here.

Give this approach a try and let me know if this is what you had in mind.

Greetings,
Tina Stancheva
the Telerik team

[Selva]

When i try to add the HeaderTemplate, i get a message stating that "The attachable property "HeaderTemplate" was not found in the type RadTabItem". I am using the telerik WPF Controls 2011 Q2 version. How do i have the close button on each tabitem? That is what i am trying to achieve...

[Tina Stancheva]

Hi Selva,

I am not sure what is causing this issue. This is why I attached a sample project illustrating how to create a RadTabControl where the RadTabItem's Header defines a Close button. The control is databound and two approaches are demonstrated - using the ItemTemplate/ContentTemplate properties of the RadTabControl to apply templates for the tabs, and using ItemContainerStyle to set a HeaderTemplate/ContentTemplate for the RadTabItems.

Please have a look at the sample and let me know if it helps.

Greetings,
Tina Stancheva
the Telerik team

[Selva]

Thanks. This is what i was looking for. I was able to figure out. Thanks again.

[Ras Ran]

hello i am RadTabControl in Telerik 2019 which contains 2 table items......i have added CloseButtonVisibility  property also...but m doubt is that when i am closing a tab item using Close Button....i want to visible that that tab item in another button click...how it can be possible...?? would you give a solution ? 

<telerik:RadTabControl  Background="#FFD1D1D1"   telerik:StyleManager.Theme="VisualStudio2013" x:Name="radTabControlUC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  DropDownDisplayMode="Visible" AllowDragReorder="True" ScrollMode="Item" CloseTabsOnMouseMiddleButtonDown="True" Visibility="Visible">

     <telerik:RadTabItem BorderThickness="1" BorderBrush="#FFE0E0E0" x:Name="RadTabItemPurchase" Header="Purchase" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" >
                    <Viewbox HorizontalAlignment="Stretch"  Stretch="Fill" VerticalAlignment="Stretch" >
                        <ContentControl>
                            <Grid  Name="grdUCPurchase"   Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <DockPanel x:Name="ContentArea" Grid.Row="1" />
                            </Grid>
                        </ContentControl>
                    </Viewbox>
                </telerik:RadTabItem>
                <telerik:RadTabItem BorderThickness="1" BorderBrush="#FFE0E0E0" x:Name="RadTabItemCriteria" Header="Purchase Book" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" >
                    <Viewbox HorizontalAlignment="Stretch"  Stretch="Fill" VerticalAlignment="Stretch" >
                        <ContentControl>
                            <Grid  Name="grdUCCriteria"   Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <DockPanel x:Name="ContentCriteria" Grid.Row="1" />
                            </Grid>
                        </ContentControl>
                    </Viewbox>
                </telerik:RadTabItem>
            </telerik:RadTabControl>

[Ras Ran]

hello i am using RadTabControl in Telerik 2019 which contains 2 table items......i have added CloseButtonVisibility  property also...but m doubt is that when i am closing a tab item using Close Button....i want to visible that that tab item in another button click...how it can be possible...?? would you give a solution ? 

<telerik:RadTabControl  Background="#FFD1D1D1"   telerik:StyleManager.Theme="VisualStudio2013" x:Name="radTabControlUC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  DropDownDisplayMode="Visible" AllowDragReorder="True" ScrollMode="Item" CloseTabsOnMouseMiddleButtonDown="True" Visibility="Visible">

     <telerik:RadTabItem BorderThickness="1" BorderBrush="#FFE0E0E0" x:Name="RadTabItemPurchase" Header="Purchase" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" >
                    <Viewbox HorizontalAlignment="Stretch"  Stretch="Fill" VerticalAlignment="Stretch" >
                        <ContentControl>
                            <Grid  Name="grdUCPurchase"   Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <DockPanel x:Name="ContentArea" Grid.Row="1" />
                            </Grid>
                        </ContentControl>
                    </Viewbox>
                </telerik:RadTabItem>
                <telerik:RadTabItem BorderThickness="1" BorderBrush="#FFE0E0E0" x:Name="RadTabItemCriteria" Header="Purchase Book" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" >
                    <Viewbox HorizontalAlignment="Stretch"  Stretch="Fill" VerticalAlignment="Stretch" >
                        <ContentControl>
                            <Grid  Name="grdUCCriteria"   Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <DockPanel x:Name="ContentCriteria" Grid.Row="1" />
                            </Grid>
                        </ContentControl>
                    </Viewbox>
                </telerik:RadTabItem>
            </telerik:RadTabControl>