Context menu in the header area of the RadTabControl

1 Answer 28 Views
TabControl
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Priya asked on 20 Apr 2022, 11:18 PM

I would like to pop-up a RadContextMenu upon right clicking anywhere in the header area of the TabControl (anywhere in the green area).

Attaching the Context menu as shown below pops up the menu everywhere including the body(ie: red area), which is not desired. I only want the menu to popup in the header area (when clicking on the tabitem headers or in the blank area after the tabitems)

     <telerik:RadTabControl     x:Name="radTabCtrl"
                                   Grid.Row="1"
                                   Margin="20,10,5,5"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                   TabStripPlacement="Left" Align="Right"
                                   DataContext="{Binding Itemss}"
                                   ItemsSource="{Binding}"
                                   PreviewTabClosed="PreviewTabClosed">
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu x:Name="tabCtrlContextMenu" Opening="TabCtrlContextMenu_Opening">
                    <telerik:RadMenuItem Header="Add" Click="Menu_Add_Click"/>
                </telerik:RadContextMenu>
            </telerik:RadContextMenu.ContextMenu>

 </telerik:RadTabControl>

 

Your help is much appreciated.

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 22 Apr 2022, 09:29 AM

Hello Priya,

To achieve the desired result, you could subscribe to the Loaded event of the RadTabControl element. In it, using the ChildrenOfType extension method, retrieve the ScrollViewer control with x:Name="ScrollViewerElement". After that, via the RadContextMenu.SetContextMenu static method, you could set a RadContextMenu instance to the returned ScrollViewer element.

The following code snippets show this logic's implementation:

<Grid x:Name="gridLayout">
    <Grid.Resources>
        <telerik:RadContextMenu x:Key="RadContextMenu">
            <telerik:RadMenuItem Header="Add"/>
        </telerik:RadContextMenu>
    </Grid.Resources>
    <telerik:RadTabControl Name="tabControl" Loaded="RadTabControl_Loaded">
        <telerik:RadTabControl.Items>
            <telerik:RadTabItem Header="Link 1"/>
            <telerik:RadTabItem Header="Link 2"/>
            <telerik:RadTabItem Header="Link 3"/>
        </telerik:RadTabControl.Items>
    </telerik:RadTabControl>
</Grid>
private void RadTabControl_Loaded(object sender, RoutedEventArgs e)
{
    var scrollViewer = ((RadTabControl)sender)
        .ChildrenOfType<ScrollViewer>()
        .FirstOrDefault(x => x.Name == "ScrollViewerElement");

    if (scrollViewer != null)
    {
        var contextMenu = this.gridLayout.Resources["RadContextMenu"] as RadContextMenu;

        RadContextMenu.SetContextMenu(scrollViewer, contextMenu);
    }
}

With that said, I have attached a sample application, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Priya
Top achievements
Rank 1
Iron
Iron
Iron
commented on 22 Apr 2022, 10:35 PM

Hi Stenly,

That worked great. Thank you.

Tags
TabControl
Asked by
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stenly
Telerik team
Share this question
or