Displaying placeholder group

Gantt Vue.js Gantt
#1

Hi,
is it possible to display empty groups as placeholders with the grouping plugin? I want empty groups that don’t display any childreen so i can move other group’s rows to that placeholder group.

Thanks.

#2

Hello Josefin,

Thanks for reaching out!

If I understand you correctly, you want to see empty groups, even when no tasks are assigned to them, and be able to drag and drop tasks into those empty groups.
In the standard DHTMLX Gantt grouping behavior, empty groups are displayed automatically when you define them via the groups array, even if there are no tasks assigned to those groups. Users can still drag and drop tasks into those empty groups as needed.
When you call gantt.groupBy({ groups: ..., relation_property: ..., ... }), Gantt creates a group for each entry in the groups array. This means that as long as your groups collection includes all the values you expect, empty groups will appear automatically.

Please check this example and try to move task rows between groups. Even when a group is empty, it’s still displayed in the grid, and it’s possible to move other task rows into it: Gantt : Samples‘’.

Or, if you mean that you need to display a group for tasks that don’t match any group, you can use the default_group_label option to place them into a special “default” group. And when, for example, you group tasks by owners, but some tasks don’t have these properties defined, then these tasks will go to this default group.
Here’s an example: DHTMLX Snippet Tool.

Please let me know if this helps you in any way. If not, could you clarify what you want to achieve so I can better assist you?

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#3

Hi,
we found a bug where unassigned tasks won’t be grouped under the default label. We recreated this in the following snippet: DHTMLX Snippet Tool
The unassigned tasks are simply displayed below, without being grouped.

Thanks,
Josefin

#4

Hi Valeria,
thanks for replying that quickly, this case works now. However, I’ve been wondering if it’s possible to display the groups task as a split task. Right now it is displayed from the child’s very first start date to the latest end date, even if there are gaps in between. Is it possible to copy those gaps in the summarized owner task?
Kind regards

#5

Hi @josefin ,

To render these gaps visually — so the grouped (virtual) task appears as a split task, you can use the render: "split" mode (Split Tasks Gantt Docs).

Here’s how it can be implemented dynamically:
After grouping tasks with gantt.groupBy(), mark the virtual grouping tasks with render = "split" like this:

gantt.eachTask(task => {
  if (task.$virtual) {
    task.$open = false;  
    task.render = "split";
  }
});
gantt.render();

Toggle this behavior when a user collapses or expands a grouping task using the onTaskClosed and onTaskOpened events:

gantt.attachEvent("onTaskClosed", id => {
  const task = gantt.getTask(id);
  if (task.$virtual) {
    task.render = "split";
    gantt.render();
  }
});

gantt.attachEvent("onTaskOpened", id => {
  const task = gantt.getTask(id);
  if (task.$virtual) {
    task.render = "";
    gantt.render();
  }
});

Please check the example: DHTMLX Snippet Tool.

However, at the moment there are some issues with rendering grouped (virtual) tasks in the split mode. Our dev team is already investigating this case, and we’ll keep you updated as soon as there are any updates or fixes available.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#6

Hi Valeria,
thanks for your reply. I ran into some issues that are demonstrated in this snippet: DHTMLX Snippet Tool

  1. The group isn’t displayed as a split task even though I copied your code snippet.
  2. Tasks without an owner aren’t displayed under the default label.
  3. I tried styling the group row so that it has a greater height and so on, but this doesn’t seem to work.

I’d be grateful for another explanation on this behavior.
Thanks,
Josefin

#7

Hi Josefin,

  1. Regarding this, as mentioned previously, this is related to the bug with rendering group as split tasks. I have reported this issue to our internal bug tracker. The dev team will fix the bug in the future. However, I am unable to give you any ETA for the fix at this time.

  2. If only one resource is specified as a string (resource: "1"), then tasks without that property skip the default group and appear at the bottom. But if you specify the resource property as an array (resource: [{ "resource_id": '1', "value": '1' }]), then the default group will be shown with the default_group_label (“None” by default).
    Please check this sample to see how to implement this: DHTMLX Snippet Tool.

  3. Unfortunately, grouped tasks (task.$virtual) don’t support per-row height adjustment. This limitation is inherent to how virtual tasks are rendered.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer