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

#3

Hello,

First, really sorry for my (very very) late answer.
Thanks for your reply anyway.
I’m actualy using the resource panel. I unfortunatly can’t use your first solution (showing one line per task below each resource) as one resource may have many many different assignments which vary each and every day.

I try to recap what I’m trying to do :

  • each resource line may have different heights, depending on the maximum number of assignments for the visible days
  • when scrolling horizontaly, those heights should adjust themselves depending on the number of assignments currently visible

Then, I tried to use the “onGanttScroll” event to handle the resizement of each line, depending on the new shown assignments. It seems OK for the calculation and setting the row_height value in the resourceStore. But nothing changes, even after calling resourceStore.refresh(), or gantt.render(). Calling gantt.resetLayout() creates an infinite loop.
What call do I have to do to redraw the resource grid (and background) ?

I noticed there is kind of a cache managment for the resource heights (cf. getItemHeightCacheState). Do I have to try to reset this cache for the new heights to be taken into account ?

Thanks for your help

#4

Hello @Nickeau,

Thank you for the provided details.

Yes, there’s cache management for resource heights (getItemHeightCacheState). When you modify the row_height property in the resourceStore and call resourceStore.refresh(), the store updates, but the views (resourceGrid and resourceTimeline) don’t automatically clear their internal height caches.

So you can try to do the following:
After modifying the row_height property for resource items in the onGanttScroll event, you need to get references to the resourceGrid and resourceTimeline views and call their refresh() methods:

    const resourceGrid = gantt.$ui.getView("resourceGrid");
    const resourceTimeline = gantt.$ui.getView("resourceTimeline");

    if (resourceGrid) {
        resourceGrid.refresh();
    }
    if (resourceTimeline) {
        resourceTimeline.refresh();
    }
    resourceStore.refresh();

The refresh() method on the views will call the internal _resetHeight() and _resetTopPositionHeight() methods that clear the height caches.

Here’s a simple example showing how the height of the resource row updates: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#5

Hello @Valeria_Ivashkevich ,

Thanks a million for this answer. I was so close to the solution :sweat_smile: !

1 Like