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.menu.setIconsPath("../../Content/images/common/");
this.menu.renderAsContextMenu();
this.menu.setSkin("dhx_terrace");
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");
this.menu.clearAll();
this.addColumnsConfig();
if (column_id) {
this.addColumnToggle(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;
this.gantt.render();
}
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);
this.menu.addNewSeparator(item_id);
}
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>
<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>
</div>
</div>
</div>
</div>
</body>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.