Search results

Open and close ContextMenu in JavaScript (ES5) Context Menu control

30 Mar 2023 / 1 minute to read

ContextMenu can be opened and closed programmatically whenever required by using the open and close methods.

In the following example, the ContextMenu is opened using the open method at the specified position using top and left. Also, ContextMenu is closed using close method 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;