Search results

Customize menu using events in React Menu Bar component

The Menu provides a set of events to enable users to customize it.

The available events are beforeOpen, beforeClose, onClose, onOpen, and select.

Source
Preview
index.tsx
index.html
index.jsx
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'));
<!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-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>
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'));