Context menu in chart area

Gantt
#1

Hi support,
I want two different context menu in tree area and chart area. can you pls share code snippet for this

Thanks.
Rasagb

#2

Hello,
There is no built-in context menu in the Gantt, but there is onContextMenu event which fires on the right click and which you can use to show a menu:
https://docs.dhtmlx.com/gantt/api__gantt_oncontextmenu_event.html ;
To create a context menu in different parts of the Gantt, you can track your clicks to the grid and chart areas with the help of gantt.utils module:
https://docs.dhtmlx.com/gantt/api__gantt_utils_other.html ;
It can help you to get the grid and chart areas provided by the CSS classes, for example:

let domHelpers = gantt.utils.dom;
    if (domHelpers.closest(e.target, `.gantt_grid_data`)) {
        //your code
    }

You can create your custom context menu or use third-party libraries. For example, a simple context menu with some buttons can be created with this html code:

let custom_menu_2 = `
    <div 
           style="top: ${e.clientY}px; left: ${e.clientX}px;" 
           class='custom_menu' 
           onclick="remove_context_menu()"
    >
      <input type=button value="Open Lightbox" onclick="gantt.showLightbox(${task_id})">
      <input type=button value="Delete Task" onclick="gantt.deleteTask(${task_id})">
      <input type=button value="Show progress" onclick="gantt.message(${gantt.getTask(task_id).progress * 100}+'%')">
    </div>
`
let el = document.createElement("div");
el.innerHTML = custom_menu_2;
document.body.appendChild(el);

At the end, you need to close the context menu. One of the options is creating a function to remove menu:


function remove_context_menu() {
    let el = document.querySelector('.custom_menu');
    if (el) {
        el.innerHTML = null;
        el.remove();
    }
}

Another option of creating a context menu is to use the context menu from the dhtmlxSuite library. The dhtmlXMenu component is initialized using the constructor new dhtmlXMenuObject() and can be called when the onContextMenu event fires. You can create the required functionality with addNewChild method and attaching onClick event to your menu object:
https://docs.dhtmlx.com/api__dhtmlxmenu_addnewchild.html ;
https://docs.dhtmlx.com/api__dhtmlxmenu_onclick_event.html ;
Please check the snippet with two different context menus (one from dhtmlxSuite library and another is a custom solution):
https://snippet.dhtmlx.com/lnh7msb4