Context Menu (ContextMenu)

Question

Can you show how to implement a context menu and a "Close" icon on the tab header?  See attached for example.Attachment: 20210315_151558_32baa2d0.zip

Nevitha Ravi · Accepted Answer

Hi Thomas,

Greetings from Syncfusion Support.

We have prepared a sample for your requirement ‘having context menu on tab header and have close button’ which can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/163543/ze/ContextMenuOnTab-975087165

<SfContextMenu Target=".e-tab-header" TValue="MenuItem">

<MenuItems>

<MenuItem Text="Close" Id="Close"></MenuItem>

<MenuItem Text="Close All" Id="All"></MenuItem>

<MenuItem Text="Close All But this" Id="NotThis"></MenuItem>

</MenuItems>

<MenuEvents TValue="MenuItem" OnOpen="OnOpen" ItemSelected="OnItemSelected"></MenuEvents>

</SfContextMenu>

public async Task OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args)

{

string selectedIndex = await jsRuntime.InvokeAsync<string>("OnHeader", args.Left, args.Top); //to get the choosen tab index

ContextMenuIndex = Convert.ToInt32(selectedIndex);

}

public async Task OnItemSelected(MenuEventArgs<MenuItem> args)

{

var SelectedMenuItem = args.Item.Id;

switch (SelectedMenuItem)

{

case "Close":

await TabRef.RemoveTab(ContextMenuIndex); //close the choosen tab alone

break;

case "All":

int c = TabRef.Items.Count;

for (int i = c - 1; i >= 0; i--) // close all the tabs available

{

await TabRef.RemoveTab(i);

}

break;

case "NotThis":

int co = TabRef.Items.Count;

for (int i = co-1; i >= 0; i--)

{

if (i != ContextMenuIndex) //to prevent closing of the choosen tab

{

await TabRef.RemoveTab(i);

}

break;

}

To show the close button, you can set true to ShowCloseButton in the Tab. We have invoked JS method to get the tab index in which context menu is opened using the below snippet.

Script.js

function OnHeader(left, top) {

return document.elementFromPoint(left, top).closest('.e-toolbar-item').getAttribute('data-index');

}

_host.cshtml

Please try the above sample and get back to us if you need any further assistance.

Regards,

Nevitha

Thomas · Answer

Thank you for your solution--it is working!

One thing I noticed was when I include the SfTab in a DashboardLayoutPanel, the ContextMenu fails to initialize on first load. You can see an example of this on the Fetch Data page in the attached solution. Notice how the ContextMenu on the SfTab outside of the Dashboard works as expected, but the ContextMenu on the same SfTab within the Dashboard only works when you navigate to the Counter page and back to the Fetch Data page.

Attachment: ContextMenuOnTab975087165_ac8d8941.zip

Ravikumar Venkatesan · Answer

Hi Thomas, Thanks for the update. We have validated your reported query “When I include the SfTab in a DashboardLayoutPanel, the ContextMenu fails to initialize on first load” at our end and resolved it by adding the SfContextMenu in the ContentTemplate of the Dashboard that contains the SfTab. For the same, we have modified the sample which can be available from the below link. Sample: https://www.syncfusion.com/downloads/support/forum/163543/ze/syncfusion-blazor-tab-with-context-menu1564389594 [FetchData.razor]

Grid

Kindly try the above sample and get back to us if you need any further assistance. Regards, Ravikumar Venkatesan

OuYuanbin · Answer

Hello~In the latest version(20.1.0.47)，this sample didn't work. Is this a new bug ? Could you please have a try.Thank you

Vengatesh Maniraj · Answer

Hi OuYuanbin,No. This is not a defect and we would like to let you know that we have made two breaking changes in the 20.1 version. Please follow below release notes and make the necessary changes to your project.https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changesRefer Syncfusion.Themes NuGet explicitly if you are using individual NuGet packages. Refer the scripts externally since we disable built-in script isolation by default in 20.1 version for better performance.On validation of the above sample, we recommend setting the .e-tab as a context menu target, so we can achieve your requirement. Please refer to the attached sample.Regards,Vengatesh Attachment: syncfusionblazortabwithcontextmenu_a727cd52.zip