Event handling in grid area

Gantt
#1

I’m trying to capture mouse and keyboard events in the grid area of the gantt chart but I am not able to do so by adding my own event handlers to elements in the grid area. It seems like the dhtmlx gantt chart seems to stop the propagation of any keyboard or mouse events so I am not able to register my own event handlers for these events. Is there a way I can handle keyboard and mouse events in the grid area with my own event handlers? Thanks.

#2

Hello,
There is keyboard navigation that allows interacting the whole grid or chart. You can assign custom shortcuts and apply them to tasks:
https://docs.dhtmlx.com/gantt/desktop__keyboard_navigation.html
Examples:
https://docs.dhtmlx.com/gantt/samples/02_extensions/16_keyboard_navigation.html
https://docs.dhtmlx.com/gantt/samples/02_extensions/17_keyboard_navigation_cell.html

There are onMouseMove and onContextMenu event handlers:
https://docs.dhtmlx.com/gantt/api__gantt_onmousemove_event.html
https://docs.dhtmlx.com/gantt/api__gantt_oncontextmenu_event.html
Examples:
https://docs.dhtmlx.com/gantt/samples/04_customization/10_context_menu.html
https://snippet.dhtmlx.com/4908dd70d

You can use the window object to assign the shortcuts and check that the mouse is over the grid:
https://snippet.dhtmlx.com/8fb3c64cd

If you want to control the elements of the row in the grid, you can return any HTML element with events:
https://snippet.dhtmlx.com/cbae636b3
https://snippet.dhtmlx.com/c37857627

#3

As for the last approach

If you want to control the elements of the row in the grid, you can return any HTML element with events:
https://snippet.dhtmlx.com/cbae636b3 3
https://snippet.dhtmlx.com/c37857627 4

I can not use this approach in react env. do you have any idea to handle this issue?

#4

Hello Kevin,
Here is an example in the React framework:
https://files.dhtmlx.com/30d/f6e02021ae6f42e050c0c650dcad6a22/react+grid_custom_buttons.zip

#5

Hi Ramil,
We are configuring the Keyboard navigation in our application. In case of Indent/ Outdent of any task/ WBS using keyboard shortcut (Shift+ Left/Right), task update is fired by the gantt. However, we want to stop the default action and execute a custom code for giving proper WBS id and sortorder to the newly added tasks and to the tasks for which these parameters have changed due to new task additions. Can you please guide us to stop the default behaviour and use our custom code?

#6

Hello Saurabh,
When you add a custom keyboard shortcut that uses the same keys, it replaces the existing configuration. And that includes the default action. But you need to correctly specify the scope:
https://docs.dhtmlx.com/gantt/desktop__keyboard_navigation.html#scopes

Here is an example:
https://snippet.dhtmlx.com/jfusgxkx