Adjusting resource row_height on the fly

Gantt
#1

Hi,
I’m currently showing multiple assignments in one day for one resource (multiple boxes vertically displayed). I then have to adjust the row height of that resource depending on then number of assignments.

image
image1141×287 22.5 KB

I’m looking for a way to dynamically adjust the row height for resources (different heights for different resources).
What event do I have to hook to in order to be able to adjust the row height for the displayed resources ?
Thanks for your help

#2

Hello,

It’s possible to adjust the row height for resources based on the number of assignments, but you’ll need to implement a custom solution. And the implementation will depend on whether you’re using the resource panel or a regular Gantt timeline.

  1. Below are two possible approaches:

If you’re using the resource panel, you can show resource assignments right below each resource in the resource grid and then display the corresponding task bars in the resource timeline.
We add the owner-label class to each resource row to apply later styles to these rows:

gantt.templates.task_row_class = function (start, end, task) {
    console.log('task', task);
    const people = gantt.serverList('people');
    if (people.find((person) => person.id === task.id && person.text === task.text)) {
        return 'owner-label';
    }
};

Here, we add top borders to the resource rows and remove borders between task rows so that all tasks appear grouped under a single resource:

	.resourceTimeline_cell .gantt_task_bg {
		border-collapse: collapse;
	}

	.resourceTimeline_cell .gantt_task .gantt_task_row {
		border-bottom: 0 none;
	}

	.resourceTimeline_cell .gantt_task .gantt_task_row.owner-label {
		border-radius: 0px;
		border-color: transparent;
		background-color: transparent;
		border-top: var(--dhx-gantt-task-row-border);
		margin-left: 0px;
	}

The helper function generateNode() creates task bars for that resource:

function generateNode(start_date, end_date, resource, assignments) {
    let node = '';
    assignments.forEach(function (assignment) {
        if (assignment.start_date && end_date && +start_date === +assignment.start_date) {
            const width = gantt.posFromDate(end_date) - gantt.posFromDate(start_date);
            let text = assignment.text || '';
            if (gantt.isTaskExists(assignment.task_id)) {
                const task = gantt.getTask(assignment.task_id);
                text = task.text;
            }

            node += `
              <div class='gantt_task_line custom' style="width: ${width}px; position: relative; top: 0px">
                  <div class="gantt_task_content">${text}</div>
              </div>
          `;
        }
    });

    return node;
}

Please check a full example with this approach: DHTMLX Snippet Tool.

  1. If you’re not using the resource panel, there’s no built-in feature to automatically adjust row height per task or resource. Unfortunately, right now we do not have a ready solution, but you can implement your custom solution, and here’s a possible implementation.
    This example demonstrates how you can visually “stack” multiple boxes within one row by manually shifting bars vertically using CSS classes. In this case, you’ll need to calculate offsets (or equivalent height adjustments) yourself, depending on how many assignments or boxes you want to show for each row.

Here, we apply classes to the tasks based on their levels:

gantt.templates.task_class = function (start, end, task) {
    if (task.level) {
        return "level_" + task.level;
    }
};

And then define the vertical offsets in CSS:

.gantt_task_line.level_1 { margin-top: -30px; }
.gantt_task_line.level_2 { margin-top: -10px; }
.gantt_task_line.level_3 { margin-top: 10px; }
.gantt_task_line.level_4 { margin-top: 30px; }

Please check a full example of how it might be implemented: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer