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.
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'));
<!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>
#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%;
}
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'));