The Menu provides a set of events to enable users to customize it.
The available events are beforeOpen, beforeClose, onClose, onOpen, and select.
import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MenuComponent } 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: 'Conferences' },
{ text: 'Music' },
{ text: 'Workshops' }
],
text: 'Events'
},
{
items: [
{ text: 'Now Showing' },
{ text: 'Coming Soon' }
],
text: 'Movies'
},
{
items: [
{ text: 'Media Gallery' },
{ text: 'Newsletters' }
],
text: 'Directory'
},
{
items: [
{ text: 'Our Policy' },
{ text: 'Site Map' }
],
text: 'Queries'
},
{ text: 'Services' }
];
this.state = {
eventTrace: ''
};
this.beforeOpen = this.beforeOpen.bind(this);
this.beforeClose = this.beforeClose.bind(this);
this.select = this.select.bind(this);
this.onOpen = this.onOpen.bind(this);
this.onClose = this.onClose.bind(this);
this.btnClick = this.btnClick.bind(this);
}
beforeOpen(args) {
this.updateEventLog(args);
}
beforeClose(args) {
this.updateEventLog(args);
}
onClose(args) {
this.updateEventLog(args);
}
onOpen(args) {
this.updateEventLog(args);
}
select(args) {
this.updateEventLog(args);
}
updateEventLog(args) {
this.setState({ eventTrace: this.state.eventTrace + args.name + ' Event triggered. <br />' });
}
btnClick() {
this.setState({ eventTrace: '' });
}
render() {
return (<div className='control-section'>
<div className='menu-section'>
<MenuComponent id='menu' items={this.menuItems} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose} onClose={this.onClose} onOpen={this.onOpen} select={this.select}/>
</div>
<div className='property-section'>
<table id='propertyTable' title='Event trace'>
<tbody>
<th>Event trace:-</th>
<tr>
<td dangerouslySetInnerHTML={{ __html: this.state.eventTrace }}/>
</tr>
</tbody>
</table>
</div>
<ButtonComponent id='clear' cssClass='e-small' content='Clear' onClick={this.btnClick}/>
</div>);
}
}
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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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>import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { BeforeOpenCloseMenuEventArgs, MenuComponent, MenuEventArgs, MenuItemModel, OpenCloseMenuEventArgs } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component<{}, { eventTrace: string }> {
public menuItems: MenuItemModel[] = [
{
items: [
{ text: 'Conferences' },
{ text: 'Music' },
{ text: 'Workshops' }
],
text: 'Events'
},
{
items: [
{ text: 'Now Showing' },
{ text: 'Coming Soon' }
],
text: 'Movies'
},
{
items: [
{ text: 'Media Gallery' },
{ text: 'Newsletters' }
],
text: 'Directory'
},
{
items: [
{ text: 'Our Policy' },
{ text: 'Site Map' }
],
text: 'Queries'
},
{ text: 'Services' }
];
constructor(props: any) {
super(props);
this.state = {
eventTrace: ''
}
this.beforeOpen = this.beforeOpen.bind(this);
this.beforeClose = this.beforeClose.bind(this);
this.select = this.select.bind(this);
this.onOpen = this.onOpen.bind(this);
this.onClose = this.onClose.bind(this);
this.btnClick = this.btnClick.bind(this);
}
public beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
this.updateEventLog(args);
}
public beforeClose(args: BeforeOpenCloseMenuEventArgs): void {
this.updateEventLog(args);
}
public onClose(args: OpenCloseMenuEventArgs): void {
this.updateEventLog(args);
}
public onOpen(args: OpenCloseMenuEventArgs): void {
this.updateEventLog(args);
}
public select(args: MenuEventArgs): void {
this.updateEventLog(args);
}
public updateEventLog(args: any): void {
this.setState({ eventTrace: this.state.eventTrace + args.name + ' Event triggered. <br />' });
}
public btnClick(): void {
this.setState({ eventTrace: '' });
}
public render() {
return (
<div className='control-section'>
<div className='menu-section'>
<MenuComponent id='menu' items={this.menuItems} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose} onClose={this.onClose} onOpen={this.onOpen} select={this.select}/>
</div>
<div className='property-section'>
<table id='propertyTable' title='Event trace'>
<tbody>
<th>Event trace:-</th>
<tr>
<td dangerouslySetInnerHTML={{__html: this.state.eventTrace}}/>
</tr>
</tbody>
</table>
</div>
<ButtonComponent id='clear' cssClass='e-small' content='Clear' onClick={this.btnClick}/>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('element'));