Handling the right click on the Grid

Gantt
#1

Hi, I have a requirement for my work to make the right click on Grid work as close as possible to Excel.

Is it possible and if yes, what would be the best approach for these:

  • Select a task line on right click and unselect all selected task lines (and still show onContextMenu)
  • While holding CTRL, select a task line on right click and keep selected tasks selected (and still show onContextMenu)
  • While holding ALT, select a task line on right click and select all task lines in between (and still show onContextMenu)

Basically, they want the right click to act like a left click on selection, and still show the onContextMenu (like in Excel)

This is a for a proof of concept. From what I read, there is the onRightClick event that could be used, but unsure how to replicate the CTRL and ALT behaviour of the left click.

Please let me know if this is feasible, thank you so much.

#2

Hello Karl,
DHTMLX Gantt wasn’t created as a replacement for Excel. So, it won’t have the same features out of the box. You need to configure it and implement the features you need.

You can add the code for selecting and unselecting the tasks before the code that shows the context menu.

Select a task line on right click and unselect all selected task lines (and still show onContextMenu)

You can use the eachSelectedTask method to iterate selected tasks:
https://docs.dhtmlx.com/gantt/api__gantt_eachselectedtask.html

There, you need to use the unselectTask method to unselect a task:
https://docs.dhtmlx.com/gantt/api__gantt_unselecttask.html

Then you need to use the selectTask method to select the task you clicked on:
https://docs.dhtmlx.com/gantt/api__gantt_selecttask.html

Each time you select or unselect tasks, Gantt repaints them. To repaint all tasks at once, you need to put your code inside the batchUpdate method:
https://docs.dhtmlx.com/gantt/api__gantt_batchupdate.html

While holding CTRL, select a task line on right click and keep selected tasks selected (and still show onContextMenu)

To detect the click with the Control key, you need to check the ctrlKey from the event argument.
Then you just need to use the selectTask method to select the task:
https://docs.dhtmlx.com/gantt/api__gantt_selecttask.html

While holding ALT, select a task line on right click and select all task lines in between (and still show onContextMenu)

To detect the click with the Alt key, you need to check the altKey from the event argument.
Then you need to implement a custom solution for selecting a range of tasks.

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/ppwvz3t6

#3

Wow thank you for this very detailled answer ramil. I will give this a try.

I see that you did not use the onRightClick event. When would that event be useful?

#4

Hello Karl,
Thank you for the positive feedback.

As you can see in the following list of event handlers, Gantt doesn’t have the onRightClick event:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskupdate_event.html

Instead, there is the onContextMenu event:
https://docs.dhtmlx.com/gantt/api__gantt_oncontextmenu_event.html

If you attach a custom right-click event to the document, you can use it instead of the onContextMenu event. But in that case, you will need to manually obtain the task ID you clicked on while the onContextMenu event handler already has the taskId parameter:
https://docs.dhtmlx.com/gantt/api__gantt_oncontextmenu_event.html#:~:text=string|number-,the%20task%20id,-linkId