Search results

Open and close ContextMenu in JavaScript ContextMenu control

22 Oct 2021 / 1 minute to read

Open and close the ContextMenu manually whenever required by using the open and close methods.

In the following sample, the ContextMenu is opened using the open method at the specified position with X and Y coordinates and to close the ContextMenu, close method is called internally on ContextMenu item click or document click.

Copied to clipboard
import { ContextMenu, MenuItemModel, ContextMenuModel } from '@syncfusion/ej2-navigations';
import { Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';


// Initialize menu items.
let menuItems: MenuItemModel[] = [
        text: 'Cut'
        text: 'Copy'
        text: 'Paste'

// Initialize ContextMenu options.
let menuOptions: ContextMenuModel = {
    items: menuItems

// Initialize ContextMenu component.
let menuObj: ContextMenu = new ContextMenu(menuOptions, '#contextmenu');

// Initialize Button component.
let button: Button = new Button();
// Render initialized Button.

// To position ContextMenu on Button click.
document.getElementById('btnElement').onclick=function() {, 20);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src=""></script>
    <script src="systemjs.config.js"></script>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!--element which is going to render-->
        <ul id="contextmenu"></ul>
        <button class='e-btn' id="btnElement">Open ContextMenu</button>

Copied to clipboard
#container {
  visibility: hidden;

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;

button {
  margin: 20px 0 0 5px;

#target {
  border: 1px dashed;
  height: 150px;
  padding: 10px;
  position: relative;
  text-align: justify;
  color: gray;
  user-select: none;