CODEWITHSUNDEEP
syncfusionej2-syncfusion
IamNewbie
IamNewbie

Reputation: 27

How to create close functionality in context menu with Syncfusion ej2

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

Answers (1)

sangeetha.murugan
sangeetha.murugan

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

Related Questions