Open and close contextmenu in EJ2 TypeScript Context menu control

2 May 20233 minutes 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.

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);
<!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>
<script src="" type ="text/javascript"></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>