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

Enable or disable context menu items in React ContextMenu component

20 Jan 2022 / 2 minutes to read

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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
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'));
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/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>
Copied to clipboard
#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;
}
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);
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.

Previous
Next