Gantt row highlight when hover on empty area of task bar

Gantt
#1

Hi
I want to make Gantt row highlighted when hover on empty area of task bar

2023-09-27 15_53_45-Window
2023-09-27 15_53_45-Window1287×83 1.35 KB

currently only task row is highlighted but not grid row due to below css
.gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.odd:hover,
.gantt_task_row:hover
{
background-color: rgba(218,236,240);
}

As of now in my case complete Gantt row is highlighted when we hover on task or grid row.

#2

Hello,
Please try using the onMouseMove event handler. If the cursor is hovering over an empty cell in the timeline then you can obtain a task ID and add a new property to it (for example $rowHighlighted):

gantt.attachEvent('onMouseMove', (id, e) => {
    ...
    if (e.target.closest('[data-task-id]') && e.target.closest('.gantt_task_cell')) {
        const taskElement = e.target.closest('[data-task-id]');
        const taskId = taskElement.getAttribute('data-task-id');

        ...
        if (taskId) {
            const hoverTask = gantt.getTask(taskId);
            
            if (!hoverTask.$rowHighlighted) {
                hoverTask.$rowHighlighted = true;
                gantt.refreshTask(taskId);
            }
        }
    }
});

Next, using the grid_row_class and task_row_class templates, set the class for row selection:

gantt.templates.grid_row_class = 
gantt.templates.task_row_class = (start, end, task) => {
    if (task.$rowHighlighted) {
        return 'gantt_selected';
    }
};

You also need to deselect the previous task row. To achieve this, you can add the prevHoverTaskId flag and then check if the cursor moves to a new task row, then deselect the previous one:

let prevHoverTaskId = null;

gantt.attachEvent('onMouseMove', (id, e) => {
    if (id) {
        const task = gantt.getTask(id);
        task.$rowHighlighted = false;
        gantt.refreshTask(id);
    }
    
    if (e.target.closest('[data-task-id]') && e.target.closest('.gantt_task_cell')) {
        const taskElement = e.target.closest('[data-task-id]');
        const taskId = taskElement.getAttribute('data-task-id');

        if (prevHoverTaskId && prevHoverTaskId != taskId) {
            const prevHoverTask = gantt.getTask(prevHoverTaskId);
            prevHoverTask.$rowHighlighted = false;
            gantt.refreshTask(prevHoverTaskId);
        }

        prevHoverTaskId = taskId;

        if (taskId) {
            const hoverTask = gantt.getTask(taskId);
            
            if (!hoverTask.$rowHighlighted) {
                hoverTask.$rowHighlighted = true;
                gantt.refreshTask(taskId);
            }
        }
    }
});

Here is an example: DHTMLX Snippet Tool . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.