Reputation: 27
I would like to create a right click context menu on my tab with close tab functionality using Syncfusion ej2. But I can't find any documentation for this particular functionality.
Upvotes: 0
Views: 786
Reputation: 19
You can use the "removeTab" public method of tab by passing the respective index to close the tabs. We have prepared the sample based on your requirement.
<div>
<ejs-tab id="appTab" showCloseButton="true">
<e-tab-tabitems>
<e-tab-tabitem header="ViewBag.headerTextOne" content="@contentOne"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextTwo" content="@contentTwo"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextThree" content="@contentThree"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
<ejs-contextmenu id="contextmenu" target="#appTab" items="ViewBag.menuItems" select="menuClick"></ejs-contextmenu>
</div>
<script>
function menuClick(args) {
if (args.item.text == "Close All") {
var tab = document.getElementById('appTab').ej2_instances[0];
for (i = $('#appTab .e-toolbar-item').length; i >= 0; i--) {
tab.removeTab(i);
}
} else if (args.item.text == "Close This Tab") {
var tab = document.getElementById('appTab').ej2_instances[0];
var activeTab = tab.selectedItem;
tab.removeTab(activeTab);
}
}
</script>
Sample: https://www.syncfusion.com/downloads/support/directtrac/298062/ze/TabComponent673764834 https://ej2.syncfusion.com/documentation/api/tab/#removetab
Upvotes: 0