Change menu items dynamically in React Context menu component

7 Oct 20257 minutes to read

The ContextMenu component supports dynamic menu item changes based on the target element where the context menu is triggered. This functionality enables context-aware menus that display different options depending on the specific area or element the user interacts with, enhancing user experience through relevant, targeted actions.

To implement dynamic menu items, initialize the ContextMenu with a comprehensive set of all possible items using the items property. Then, use the beforeOpen event to selectively show or hide specific items based on the target context. This approach leverages the hideItems and showItems methods to control menu item visibility dynamically.

The beforeOpen event provides access to the target element through its event arguments, allowing you to determine the appropriate menu items to display based on element properties, classes, or other identifying attributes.

In the following example, the menu items change contextually based on the target area: the Clipboard div displays Cut, Copy, and Paste options, while the Editor div shows Add, Edit, and Delete actions. This dynamic behavior is implemented using the hideItems and showItems methods within the beforeOpen event handler.

import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let cmenuInstance;
    let menuItems = [
        {
            text: 'Cut'
        },
        {
            text: 'Copy'
        },
        {
            text: 'Paste'
        },
        {
            text: 'Add'
        },
        {
            text: 'Edit'
        },
        {
            text: 'Delete'
        }
    ];
    function beforeOpen(args) {
        if (args.event.target.id === 'right') {
            cmenuInstance.hideItems(['Cut', 'Copy', 'Paste']);
            cmenuInstance.showItems(['Add', 'Edit', 'Delete']);
        }
        else if (args.event.target.id === 'left') {
            cmenuInstance.showItems(['Cut', 'Copy', 'Paste']);
            cmenuInstance.hideItems(['Add', 'Edit', 'Delete']);
        }
    }
    return (<div className="container">
            <div id="target">
                <div id='right' className='e-div'>Editor</div>
                <div id='left' className='e-div'>Clipboard</div>
            </div>
            <ContextMenuComponent id='contextmenu' target='#target' ref={cmenu => cmenuInstance = cmenu} items={menuItems} beforeOpen={beforeOpen}/>
          </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
  let cmenuInstance: ContextMenuComponent;
  let menuItems: MenuItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    },
    {
        text: 'Add'
    },
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    }];

  function beforeOpen(args: BeforeOpenCloseMenuEventArgs) {
      if ((args.event.target as HTMLElement).id === 'right') {
        cmenuInstance.hideItems(['Cut', 'Copy', 'Paste']);
        cmenuInstance.showItems(['Add', 'Edit', 'Delete']);
      } else if ((args.event.target as HTMLElement).id === 'left') {
        cmenuInstance.showItems(['Cut', 'Copy', 'Paste']);
        cmenuInstance.hideItems(['Add','Edit','Delete']);
      }
  }

  return (
          <div className="container">
            <div id="target">
                <div id='right' className='e-div'>Editor</div>
                <div id='left' className='e-div'>Clipboard</div>
            </div>
            <ContextMenuComponent id='contextmenu' target='#target' ref={cmenu => cmenuInstance = cmenu as ContextMenuComponent}
            items={menuItems} beforeOpen={beforeOpen}/>
          </div>
      );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));