How to change menu items dynamically in EJ2 TypeScript Context menu

4 Sep 20265 minutes to read

The items visible in the ContextMenu can be changed dynamically based on the target in which you open the ContextMenu. To achieve this behavior, initialize the ContextMenu with all items using the items property, and then based on the context in which you open the menu, hide or show the required items using the hideItems and showItems methods in the beforeOpen event.

In the following example, the data source for the Clipboard div (Cut, Copy, Paste) and the Editor div (Add, Edit, Delete) is changed on the beforeOpen event using the hideItems and showItems methods.

import { ContextMenu, MenuItemModel, ContextMenuModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize menu items.
let menuItems: MenuItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    },
    {
        text: 'Add'
    },
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    }];

// Initialize ContextMenu options.
let menuOptions: ContextMenuModel = {
        target: '#target .e-div',
        items: menuItems,
        beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
          // To hide/show items on right click.
          if ((args.event.target as HTMLElement).id === 'right') {
            menuObj.hideItems(['Cut', 'Copy', 'Paste']);
            menuObj.showItems(['Add', 'Edit', 'Delete']);
          } else if ((args.event.target as HTMLElement).id === 'left') {
            menuObj.showItems(['Cut', 'Copy', 'Paste']);
            menuObj.hideItems(['Add','Edit','Delete']);
          }
        }
    };

// Initialize ContextMenu component.
let menuObj: ContextMenu = new ContextMenu(menuOptions, '#contextmenu');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="target">
            <div id='left' class='e-div'>Clipboard</div>
            <div id='right' class='e-div'>Editor</div>
        </div>
        <!--element which is going to render-->
        <ul id="contextmenu"></ul>
    </div>
</body>

</html>