You can enable and disable the menu items using the enableItems
method in ContextMenu. To enable menuItems, set the enable
property in argument to true
and vice-versa.
In the following example, the Display Settings in parent items and Medium icons in sub menu items are disabled.
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component {
public cMenu: ContextMenuComponent;
private menuItems: MenuItemModel[] = [
{
items: [
{ text: 'Large icons' },
{ text: 'Medium icons' },
{ text: 'Small icons' }
],
text: 'View'
},
{
text: 'Sort By'
},
{
text: 'Refresh'
},
{
separator: true
},
{
text: 'New'
},
{
separator: true
},
{
text: 'Display Settings'
},
{
text: 'Personalize'
}
];
constructor(props: any) {
super(props);
this.created = this.created.bind(this);
this.beforeOpen = this.beforeOpen.bind(this);
}
public render() {
return (
<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id="cmenu" ref={(scope) => this.cMenu = scope as ContextMenuComponent} target='#target' items={this.menuItems} created={this.created} beforeOpen={this.beforeOpen} />
</div>
);
}
private created() {
this.cMenu.enableItems(['Display Settings'], false);
};
private beforeOpen() {
this.cMenu.enableItems(['Medium icons'], false);
};
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
}
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
text-align: justify;
color: gray;
user-select: none;
}
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);
class App extends React.Component {
constructor(props) {
super(props);
this.menuItems = [
{
items: [
{ text: 'Large icons' },
{ text: 'Medium icons' },
{ text: 'Small icons' }
],
text: 'View'
},
{
text: 'Sort By'
},
{
text: 'Refresh'
},
{
separator: true
},
{
text: 'New'
},
{
separator: true
},
{
text: 'Display Settings'
},
{
text: 'Personalize'
}
];
this.created = this.created.bind(this);
this.beforeOpen = this.beforeOpen.bind(this);
}
render() {
return (<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id="cmenu" ref={(scope) => this.cMenu = scope} target='#target' items={this.menuItems} created={this.created} beforeOpen={this.beforeOpen}/>
</div>);
}
created() {
this.cMenu.enableItems(['Display Settings'], false);
}
;
beforeOpen() {
this.cMenu.enableItems(['Medium icons'], false);
}
;
}
ReactDom.render(<App />, document.getElementById('element'));
To disable sub menu items, use the
beforeOpen
event.