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:
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
Thank you,it is working for resource grid drop.
How to drop on resource timeline and get date time of dropped cell?
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: