This is a migrated thread and some comments may be shown as answers.

Close button in one RadTabItem

6 Answers 175 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Roy Halvorsen
Top achievements
Rank 1
Roy Halvorsen asked on 24 Jun 2010, 09:11 AM
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

6 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 28 Jun 2010, 06:51 PM
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
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
0
Selva
Top achievements
Rank 1
answered on 10 Aug 2011, 09:25 PM
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...
0
Tina Stancheva
Telerik team
answered on 11 Aug 2011, 11:31 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Selva
Top achievements
Rank 1
answered on 11 Aug 2011, 08:16 PM
Thanks. This is what i was looking for. I was able to figure out. Thanks again.
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 20 Jul 2019, 09:29 AM
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>
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 20 Jul 2019, 09:32 AM

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>

 

Tags
TabControl
Asked by
Roy Halvorsen
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Selva
Top achievements
Rank 1
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or