I want to navigate horizontally to the task when click on the task to edit

Gantt
#1

For now the behavior that i have is: using showTask it shows the task on the gantt but also scroll the grid vertically, and using scrollTo it doesn’t works when click to edit inline. I just want to scroll horizontally even to see the task and the grid needs to be in the same position that is was before:

gantt.ext.inlineEditors.attachEvent(“onBeforeEditStart”, () => {
const gridScroll = gantt.getScrollState();
gantt.scrollTo(gridScroll.x, gridScroll.y);
})

#2

Hello Daniel,

You can achieve this inside the onTaskClick event. Use the task’s start_date and posFromDate() to calculate its position on the timeline. Then use scrollTo(x) (without specifying the y position) to scroll horizontally:

gantt.attachEvent("onTaskClick", (id, e) => {
	const task = gantt.getTask(id);
	const taskPosX = gantt.posFromDate(task.start_date);
	gantt.scrollTo(taskPosX); // horizontal scroll only

	return true; // allow default click behavior (e.g., inline editing)
});

Please see an example: DHTMLX Snippet Tool

1 Like
#3

Thank you! It was really useful

1 Like