Need to identify an event when user clicks on Gantt vertical or horizontal scroll

Gantt
#1

Hi,

We are using DHTMLX Gantt with Angular and we need to call a function when a user clicks on either Gantt vertical or horizontal scroll bars.

Could you please help us to achieve this.

Thank you.

#2

Hi,
You can capture mousedown or click event on the container of Gantt. And inside the event handler, you’ll check whether the event target is a scrollbar using the Element.closest function:

export class GanttComponent implements OnInit {
	@ViewChild('gantt_here', { static: true }) ganttContainer!: ElementRef;

	constructor(private taskService: TaskService, private linkService: LinkService, element: ElementRef) {
		const ganttContainer = element.nativeElement as HTMLTextAreaElement
		ganttContainer.addEventListener('mousedown', (e) => {
			const target = e.target as HTMLTextAreaElement;
			if (target.closest(".gantt_layout_cell.gantt_hor_scroll")) {
				alert("click on a horizontal scroll");
			} else if (target.closest(".gantt_layout_cell.gantt_ver_scroll.gantt_layout_cell_border_top")) {
				alert("click on a vertical scroll");
			}
		});
	}
    ...

Here is a simple example:
https://files.dhtmlx.com/30d/51ae50604a93bb47684b1c9c289af822/angular13+gantt+scrollbar_click.zip

Do you need to capture the mouse click event specifically, or are you trying to detect scrolling, that happens when the user clicks the scrollbar?
In that case, Gantt has an API event for the scroll action: https://docs.dhtmlx.com/gantt/api__gantt_onganttscroll_event.html

1 Like