Hi,
Is there an inbuilt method that I can use for collision detection for gantt grid to avoid situations as shown (outlined in red) in the image below ?
Hi,
There is no such method in the Gantt since the context menu itself is custom. But you can limit the location of the context menu, depending on the height and width of the gantt. It might look something like this:
gantt.attachEvent("onContextMenu", (id, linkId, e) => {
removeContextMenu();
if (!id) {
return
}
const ganttHeight = gantt.$container.offsetHeight;
const ganttWidth = gantt.$container.offsetWidth;
let top = e.clientY;
let left = e.clientX;
const lowerBorder = ganttHeight - 63;
const rightBorder = ganttWidth - 105;
if(top > lowerBorder) {top = lowerBorder}
if(left > rightBorder) {left = rightBorder}
const customMenu = `
<div
style="top: ${top}px;left: ${left}px;"
class='custom_menu'
onclick="removeContextMenu()"
>
<input type=button value="Open Lightbox" onclick="gantt.showLightbox(${id})">
<input type=button value="Delete Task" onclick="gantt.deleteTask(${id})">
<input type=button value="Show progress" onclick="gantt.message(${gantt.getTask(id).progress*100}+'%')">
</div>
`
const el = document.createElement("div")
el.innerHTML = customMenu;
document.body.appendChild(el)
e.preventDefault()
return true;
});
Here is an example in the snippet: https://snippet.dhtmlx.com/xespoar1.
1 Like