Hi Team, I need you support on two topics. We do have full license of the control.
Hello Mahesh,
If you want to highlight the timeline cells, you can use the timeline_cell_class template:
https://docs.dhtmlx.com/gantt/api__gantt_timeline_cell_class_template.html
Gantt doesn’t have a built-in way to vertically reorder tasks in the timeline. The dev team will add that feature in the future, but I cannot give you any ETA.
For now, you need to implement a custom solution.
There is an example of the implementation where you can do that:
https://snippet.dhtmlx.com/usfulweq
And here is the snippet that demonstrates how it can be implemented in your case according to what I see on the screenshot:
https://snippet.dhtmlx.com/j85ag6h2
Hello Ramil,
Thank you for your feedback.
W.r.to First Point :- We are want to apply color not based on task cell.
It’s like Working time is overlapped on Office time. Worktime is 10:45am - 5:30pm. Office time like 9:10am to 6:10pm. Task are like 11:00am - 11:51am and so on.
For Second point we want to hide “+” symbol which is next to Duration column.
https://snippet.dhtmlx.com/usfulweq
Hello Mahesh,
W.r.to First Point :- We are want to apply color not based on task cell.
It’s like Working time is overlapped on Office time. Worktime is 10:45am - 5:30pm. Office time like 9:10am to 6:10pm. Task are like 11:00am - 11:51am and so on.
You can show any HTML elements in the timeline by using the addTaskLayer method:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html
But you will need to implement a custom solution to show one rectangle on top of another. The easiest way would be to create several HTML elements and attach them to 1 HTML element that will be returned by the addTaskLayer method.
Here is an example that can help you to start implementing your solution:
https://snippet.dhtmlx.com/iecow0wq
For Second point we want to hide “+” symbol which is next to Duration column.
You can customize which columns are displayed by modifying the columns parameter:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html
https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html
Here is an example in the snippet:
https://snippet.dhtmlx.com/6bdkomb2
@ramil : Thank you for the input.
Two more follow up questions.
Hello Mahesh,
Can we drag and drop when gantt.config.readonly = true;? If gantt.config.readonly = false, user can change the task duration, we need to avoid this.
If you enable the readonly mode, you cannot modify tasks via drag and drop, but it is possible to do that with the Gantt API:
https://files.dhtmlx.com/30d/934ce17734e13fbda1c0af3813ab4fcd/vokoscreen-2023-12-26_10-05-26.mp4
After drag and drop of a task, it should retains it’s duration. Ex if Task is spread across 3 hours after it’s part of another parent, it should retain its duration.
By default, the duration_unit parameter is set to “day”:
https://docs.dhtmlx.com/gantt/api__gantt_duration_unit_config.html
Gantt stores the duration value only in the integer format. If you have a different value, the duration will be rounded after a task is updated. When you set the duration_unit to “hour”, Gantt calculates the duration in hours.
Also, when you drag tasks in the timeline, by default, Gantt snaps them to the scales. If you disable the round_dnd_dates config, Gantt will round the dates to the nearest hour:
https://docs.dhtmlx.com/gantt/api__gantt_round_dnd_dates_config.html
It works that way in the snippets I sent you:
https://files.dhtmlx.com/30d/fa563dc4cac9688899642b7cbf364fa0/vokoscreen-2023-12-26_10-13-28.mp4
