I can't properly display dhtmlx menu

I am trying to implement hide/show columns as per this example.

dhtmlx.com/docs/products/dhtmlx … onfig.html

I am having a problem positioning the menu, it does not show up at the (x,y) coordinate specified. It shows up at (0,0). Note that I also have a dhtlmxMenu as the header on the page. So the context menu is an addition.

Here is the class that creates the column hide/show context menu.

class GanttColumnChooser {

    //pass this in so we don't have to refactor for multiple gantt charts.
    constructor() {
        this.gantt = null;
        //this.menu = new dhtmlXMenuObject("columnChooserParent");
        this.menu = new dhtmlXMenuObject();


    addContentMenu(ganttChart) {
        this.gantt = ganttChart;

        this.gantt.attachEvent("onContextMenu", this.onContextMenu.bind(this));
        this.menu.attachEvent("onClick", this.menuOnClick.bind(this));

    onContextMenu(taskId, linkId, event) {
        var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

        var target = (event.target || event.srcElement);
        var column_id = target.getAttribute("column_id");

        if (column_id) {

        this.menu.showContextMenu(x, y);
        return false;

    menuOnClick(id, zoneId, cas) {
        var parts = (id + "").split("#");
        var is_toggle = parts[0] == "toggle",
            column_id = parts[1] || id;

        var column = this.gantt.getGridColumn(column_id);

        if (column) {
            var visible = !is_toggle ? this.menu.getCheckboxState(id) : false;
            column.hide = !visible;
        return true;

    addColumnToggle(column_name) {
        var column = this.gantt.getGridColumn(column_name);
        var label = this.getColumnLabel(column);

        //add prefix to distinguish from the same item in 'show columns' menu
        var item_id = "toggle#" + column_name
        this.menu.addNewChild(null, -1, item_id, "Hide '" + label + "'", false);

    addColumnsConfig() {
        this.menu.addNewChild(null, -1, "show_columns", "Show columns:", false);
        var columns = this.gantt.config.columns;

        for (var i = 0; i < columns.length; i++) {
            var checked = (!columns[i].hide),
                itemLabel = this.getColumnLabel(columns[i]);
            this.menu.addCheckbox("child", "show_columns", i, columns[i].name, itemLabel, checked);

    getColumnLabel(column) {
        if (column == null)
            return '';

        var locale = this.gantt.locale.labels;
        var text = column.label !== undefined ? column.label : locale["column_" + column.name];

        text = text || column.name;
        return text;

Note when I call

this.menu.showContextMenu(x, y);

The (x,y) Coordinates are exactly where they should be and are not 0,0.
Here is my HTML.

    <body class="gantt-body">
        <div class="container-fluid body-content fill gantt-container">
            <div class="row gantt-save-icon">
                <i class="fa fa-warning faa-flash animated col-md-auto" id="loader"></i>
                <label class="col-md-8 gantt-save-icon-label">Saving</label>

            <div class="container-fluid fill">
                <div class="panel">
                    <div class="panel panel-header-noborder gantt-chart-header">
                      <div id="ganttMenu"></div>
                    <div class="panel panel-body-noborder gantt-chart">
                        <div id="gantt_here"></div>


unlike the “ganttMenu” that I am using as a header and navigation on the page. I have not specified a parent object div for the context menu. The example on the website doesn’t do that so I didn’t either.

Why is the position always(0,0) when it displays?
Why is it underneath the gantt chart as well? I can only see the first menu item, the rest are underneath the gantt chart.

I have posted a picture here to show what happens when I right click.


The example does not give a parent container. I added a parent container in the HTML and gave it a style of

#contextMenuColumnChooser {

This fixed the problem.