Multiple tasks in the same row


I am currently evaluating dhtmlxGantt. I am interested in adding multiple tasks in the same row and from what I’ve found out it wasn’t possible. Is this supported ? or is there any hack that achieves it ?

Thanks in advance


adding multiple different tasks in a same row is not supported by the design of the component, since each row of a Gantt chart represents a single task.
However, if by this you mean displaying several timelines of the same task, like displaying planned time vs actual time together - this functionality will be available in the upcoming version of the gantt, which is planned to be released next week.
The next version will still have a limitation for a one draggable element per row (i.e. user will be able move or resize by d’n’d only ‘actual’ task, other elements like planned task or deadline markes won’t be draggable)



Has this feature been implemented ? If so can you point us to your documentation about this ?

What we are looking for is a way to display the full project time behind the main project task so that our customer can get a preview of the project before clicking on the + sign to see the individual tasks.

Here’s an example of what we are trying to achieve :

We want tu purchase your software for a company that prepares events, they do the preperation before and the cleaning up after the events and want to see on one line when a project is folded up the begin date of the preparation, the begin and end date of the event and the end date of the cleaning up.


yes, this functionality has been introduced in version 3.0
Additional elements, such as full duration of subtasks or preparation times before and after each task can be added using TaskLayer api,

For example, code for displaying a full time when the main project task is closed:


.taks-overall{ position: absolute; background: gray; opacity: 0.5; margin-top: 2px; border-radius: 8px; }
if(!task.$open && gantt.hasChild({

	var nested = gantt.getSubtaskDates(;
	var sizes = gantt.getTaskPosition(task, nested.start_date, nested.end_date);

	var el = document.createElement("div"); = sizes.width + "px"; = gantt.config.row_height - 5 + "px"; = + "px"; = sizes.left + "px";
	el.className = "taks-overall";
	return el;

});[/code] … dates.html … layer.html … ition.html

The preparation time can be displayed in similar way. Note that this api is available only under Commercial and Enterprise licenses of the component, e.g. free GPL version of gantt does not have it. You’ll need to get an evaluation version of the gantt to run this code



We have been playing around with our demo to make sure we can do everything before we start the final programming and buy the licence and we have come across another thing that seems quite complicated to do.

We want to be able to show a preview of the tasks a project contains on a single line.

I thought about using your example here : … pleofusage

with instead of planned_start and planned_end add :

project1_start, project1_end
project2_start, project2_end
project3_start, project3_end
project4_start, project4_end
project5_start, project5_end

But this seems very complicated.

In the example here : … _task.html

It doesn’t seem possible to split a task into more than two parts and you can’t specify a begin and end date for each part.

In our project we have a list of vehicules that contain projects that contain tasks to represent when the vehicule is used.

We need a single line that shows all the times the vehicule is used that we can unfold to see the detail (projects and tasks)

Is this possible ? Do you have a suggestion of a better way of doing it ? How can we add a click event to each subtask on the single line ?



this shouldn’t have really differ with the approach used for baseline example.

The example uses a single alternate timespan (planned start/end time). In your case you’ll need to call the same code for all needed timespans.
In order to return multiple elements from the function, you can wrap them into the container element. The code that renders a single timespan (baseline from the example) can be moved to a separate function.


[code]gantt.addTaskLayer(function draw_planned(task) {
var wrapper = document.createElement(‘div’);
if (task.planned_start && task.planned_end)
wrapper.appendChild(renderElement(task, task.planned_start, task.planned_end));

if (task.other_start && task.other_end) 
    wrapper.appendChild(renderElement(task, task.other_start, task.other_end));

// or render elements in a loop, depends how you define the properties with alternate dates
return wrapper;


function renderElement(task, start_date, end_date){
var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);
var el = document.createElement(‘div’);
el.className = ‘baseline’; = sizes.left + ‘px’; = sizes.width + ‘px’; = + gantt.config.task_height + 13 + ‘px’;
return el;


I also have needed multiple tasks on the same row, so I ended modifying the dhtmlx source code to achieve this result.
Basically, I introduced the concept of siblings tasks: those tasks do not have a reference to a parent but a reference to the first task on the same row.

Naturally it is a bit hard to maintain because I have to carry those modifications among DHTMLX Gantt releases :slight_smile:


This is a fantastic modification!!! This is exactly what I want to do. Can you share your code?


Displaying sibling tasks in one rows has become a decisive criterion for me.
I only have to display data, there is no CRUD-action.

So I’m glad to read gorgoroths Post… but “modifying the dhtmlx source code” concerns me …

Will this feature be available in an upcoming version ?


I have modified the gpl and enterprise versions. Those versions are a bit different from each other.
I will try to share the modifications mede in the gpl source code.


I 've reached a solution by using Aliaksandrs post above:
a loop in the “onTaskLoading” to parse the dates and in gantt.addTaskLayer to add the


But now the printing over
name: “myPrintname.pdf”,
locale: “de”,
skin: “terrace”

will only show the first task of the line.
Is there a property I can set to the

, to let them be printed?



Try providing your stylesheet to the export service … outputfile
Probably the custom layer elements are not visible because the export don’t have styles that are used for a custom divs on the page


I have added the classes , seen in the DOM of the “original” Tasks.

First the wrapper :

        gantt.addTaskLayer(function draw_deadline(task) {

            var wrapper = document.createElement("div");
           wrapper.className = "gantt_bars_area";           // <- here the "original" Class
                $.each(task.BelAGPosID_Array, function (index, value) {
                    if (task[startname] && task[endname]) {

                        var el = renderElement(task,


and in the Loop I do this:
[code]        function renderElement(task, start_date, end_date, taskColor, taskText) {

            var el = document.createElement("div");
            var el_progress = document.createElement("div");
            var el_content = document.createElement("div");

            var sizes = gantt.getTaskPosition(task, start_date, end_date);
            el.className = "gantt_task_line gantt_task_inline_color";    // <- here the "original" Class

   = sizes.left + "px";
   = sizes.width + "px";
   = + 2 + "px";
   = "30px";
   = "29px";
            el.setAttribute("title", taskText);

            el_progress.className = "gantt_task_progress";    // <- here the "original" Class
   = "0px";

   = taskColor;
            el_content.textContent = taskText;
            el_content.className = "gantt_task_content";       // <- here the "original" Class
   = "black";


            return el;

But there is the same behavior,

Print: only the “original” Task

anything missing?


Displaying of subtasks example is great if you want to have multiple tasks in the same row: … aying.html

But the problem is if you have two tasks with identical start and end date. Then you can’t see them all, unless you expand subtasks.

Aliaksandr do you have any idea how to tweak it so that you can see that more than one task is on the same date range without expanding all subtasks?


it really depends on how you want to display such tasks.
As you can see from the function that displays items in a same row, it has a list of all items to be displayed and you explicitly sets height/top coordinates of their elements:

[code]gantt.addTaskLayer(function show_hidden(task) {
if (!task.$open && gantt.hasChild( {
var sub_height = gantt.config.row_height - 5,
el = document.createElement(‘div’),
sizes = gantt.getTaskPosition(task);

	var sub_tasks = gantt.getChildren(;

	var child_el;

	for (var i = 0; i < sub_tasks.length; i++){
		var child = gantt.getTask(sub_tasks[i]);
		var child_sizes = gantt.getTaskPosition(child);

		child_el = createBox({
			height: sub_height,,
			width: child_sizes.width
		}, "child_preview gantt_task_line");
		child_el.innerHTML =  child.text;
	return el;
return false;

It’s quite easy to detect overlapping events (simply iterate array and find overlapping dates), then you can assign them appropriate coordinates/dimensions so they would be visible e.g. how it’s done for events in scheduler in this example

That is a general direction, although a production-ready implementation may be not trivial and I currently don’t have any ready example


Thank you very much for direction. I will try to implement it right away.


hello, my friends.

some found the code for this requirement. i need the same requirement.



I Agreed With Monarobase Thats Cool 7 Great Thinking…


Thanks all for your responses. i was having similar questions and your answers were helpful to me.


Hello developer, I have been able to do a lot of tasks on the line and drag and drop the task but on some occasions the drag to the last line is duplicated, I don’t know why you can tell me how Fix this not! Thanks