Context Menu

dhtmlxContextMenu is a component that provides an easy way to add a contextual menu to projects. It will be of great help for frequently used actions in web sites, help systems, etc.


DHX Context Menu

Related sample:  Basic context menu initialization - DHTMLX Menu

Initialization

You can initialize dhtmlxContextMenu with the constructor:

var cmenu = new dhx.ContextMenu(null, {css: "dhx_widget--bg_gray"});

It takes two parameters:

  • container - optional, set it to null, since ContentMenu is created inside a popup
  • config - optional, a configuration object. You can set the CSS classes to style a context menu here

Loading menu options

Like with dhtmlxMenu, options can be either parsed from a JSON array:

var data = [
    { value: "File", 
        items: [
            { value: "New File", icon: "dxi dxi-file-outline"},                      
            { value: "Remove File", icon: "dxi dxi-delete"}        
        ]
    },
    {
        type: "separator"
    },
    { value: "Edit",
        items: [
            { value: "Undo", icon: "dxi dxi-undo"},
            { value: "Redo", icon: "dxi dxi-redo"}
         ]
    },
    {
        type: "spacer"
    }
];
 
cmenu.data.parse(data);

or loaded from a JSON file:

cmenu.data.load("[path_to_file]/file.json");

Showing dhtmlxContextMenu

dhtmlxContextMenu is attached to a context zone, and can be shown with the showAt() method. It takes two parameters:

  • element - (HTMLElement|Event|string) the element that will be a context zone: an HTML object/its id/a mouse event
  • mode - (string) optional, the position of showing a context menu relative to the context zone: "bottom"|"right". By default a context menu is shown at the point where the mouse pointer is.

Attaching to HTML object

This is how you can attach dhtmlxContextMenu to an HTML element:

<div id="menu"></div>
var cmenu = new dhx.ContextMenu(null, {css: "dhx_widget--bg_gray"});
 
document.querySelector('#menu').oncontextmenu = function(e) {    
    e.preventDefault();
    cmenu.showAt('menu', 'right');
}
  • e is the mouse event.

Attaching to a mouse event

This is how you can attach dhtmlxContextMenu to a mouse event:

var cmenu = new dhx.ContextMenu(null, {css: "dhx_widget--bg_gray"});
 
document.querySelector('#menu').oncontextmenu = function(e) {   
    e.preventDefault();
    cmenu.showAt(e);
}
Back to top