React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Change menu items dynamically in React ContextMenu component

02 Feb 2023 / 2 minutes to read

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

In the following example, the datasource for Clipboard div is Cut, Copy, Paste and for the Editor div is Add, Edit, Delete is changed on beforeOpen event using hideItems and showItems method.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
  visibility: hidden;
}

#target {
  border: 1px dashed;
  height: 150px;
  padding: 10px;
  position: relative;
  text-align: justify;
  color: gray;
  user-select: none;
}

#right {
  float: right;
  border: 1px dashed;
  height: 98%;
  width: 48%;
}

#left {
  float: left;
  border: 1px dashed;
  height: 98%;
  width: 48%;
}
Copied to clipboard
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'));
Previous
Next