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

Change menu items dynamically in React ContextMenu component

23 Feb 2021 / 2 minutes to read

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.

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

class App extends React.Component {
  public cmenuInstance: ContextMenuComponent;
  public menuItems: MenuItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    },
    {
        text: 'Add'
    },
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    }];
  constructor(props: any) {
    super(props);
    this.beforeOpen = this.beforeOpen.bind(this);
  }
  public beforeOpen: any = (args: BeforeOpenCloseMenuEventArgs) => {
      if ((args.event.target as HTMLElement).id === 'right') {
        this.cmenuInstance.hideItems(['Cut', 'Copy', 'Paste']);
        this.cmenuInstance.showItems(['Add', 'Edit', 'Delete']);
      } else if ((args.event.target as HTMLElement).id === 'left') {
        this.cmenuInstance.showItems(['Cut', 'Copy', 'Paste']);
        this.cmenuInstance.hideItems(['Add','Edit','Delete']);
      }
  }

  public render() {
    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 => this.cmenuInstance = cmenu as ContextMenuComponent}
              items={this.menuItems} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose}/>
           </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-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%;
}

#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 { 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 = [
            {
                text: 'Cut'
            },
            {
                text: 'Copy'
            },
            {
                text: 'Paste'
            },
            {
                text: 'Add'
            },
            {
                text: 'Edit'
            },
            {
                text: 'Delete'
            }
        ];
        this.beforeOpen = (args) => {
            if (args.event.target.id === 'right') {
                this.cmenuInstance.hideItems(['Cut', 'Copy', 'Paste']);
                this.cmenuInstance.showItems(['Add', 'Edit', 'Delete']);
            }
            else if (args.event.target.id === 'left') {
                this.cmenuInstance.showItems(['Cut', 'Copy', 'Paste']);
                this.cmenuInstance.hideItems(['Add', 'Edit', 'Delete']);
            }
        };
        this.beforeOpen = this.beforeOpen.bind(this);
    }
    render() {
        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 => this.cmenuInstance = cmenu} items={this.menuItems} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose}/>
           </div>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));
Previous
Next