In Resource view panel, are there any methods or events to drag tasks from layout 1 and drop them into the grid and/or timeline of layout 2

Gantt
#1

In Resource view panel, are there any methods or events to drag tasks from layout 1 and drop them into the grid and/or timeline of layout 2.
Sample image is provided:

MicrosoftTeams-image (1)
MicrosoftTeams-image (1)1828×891 64.1 KB

#2

Hello,
Gantt doesn’t have a built-in feature to drag some elements into the resource panel. You need to implement a custom solution by using the Gantt API and Javascript.

Here is an example of how it can be implemented:

Here we listen to the row drag start event that fires when you start reordering a task row in the grid (when the order_branch config is enabled):
https://docs.dhtmlx.com/gantt/api__gantt_onrowdragstart_event.html

If it is the element of the owner column, we generate an HTML element and add it to the DOM and return false to prevent the vertical task reorder.

In the onMouseMove event we check if the element we created exists and update its coordinates:
https://docs.dhtmlx.com/gantt/api__gantt_onmousemove_event.html

When we release the mouse button, we check if the resource is already assigned to the task. If not, we add a new item to the resource assignments store and update the task to apply and repaint the changes:
https://docs.dhtmlx.com/gantt/api__gantt_datastore_other.html
https://docs.dhtmlx.com/gantt/api__gantt_getresourceassignments.html

#3

Thank you,it is working for resource grid drop.
How to drop on resource timeline and get date time of dropped cell?

#4

Hello Kiran,
You can already drop tasks to the resource timeline, and they will be assigned to the resources:
https://files.dhtmlx.com/30d/42b456b3d736dd6004a095065a6c9777/vokoscreen-2023-10-25_11-13-31.mp4

If you want to get the date from a position in the timeline, you need to use the dateFromPos method:
https://docs.dhtmlx.com/gantt/api__gantt_datefrompos.html

To get the position of the click or mouse up, you can use the getRelativeEventPosition method of the DOM helpers:
https://docs.dhtmlx.com/gantt/api__gantt_utils_other.html#:~:text=will%20be%20checked-,getRelativeEventPosition,-(e%2C%20node)%3A%20object

So, the code for that may look like this:

const pointerPosition = gantt.utils.dom.getRelativeEventPosition(e, gantt.$task_data).x
const pointerDate = gantt.dateFromPos(pointerPosition)

But if you want to assign tasks to the specific dates, it won’t be enough to specify the dates. By default, Gantt will snap the assignment to the task dates:
https://docs.dhtmlx.com/gantt/desktop__resource_management.html#:~:text=Setting%20the%20time%20of%20the%20resource%20assignments

If you want to set it to the specific dates, you will need to change the mode to "fixedDates".

Here is the updated snippet: