Search results

Open and close ContextMenu in JavaScript (ES5) ContextMenu control

20 Jan 2022 / 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

var menuItems = [
        text: 'Cut'
        text: 'Copy'
        text: 'Paste'
var menuOptions = {
        items: menuItems

var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');

var button = new ej.buttons.Button();

document.getElementById('btnElement').onclick=function() {
    var contextMenuObj = document.getElementById("contextmenu").ej2_instances[0];, 20);
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <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="" type="text/javascript"></script>
    <div id="container">
        <!--element which is going to render-->
        <ul id="contextmenu"></ul>
        <button class="e-btn" id="btnElement">Open ContextMenu</button>

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
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;