Grouping, split-tasks, and grid columns

Gantt
#1

Simplified demo here: https://snippet.dhtmlx.com/doll1rc8
I’d expect, when pressing the “toggle” button, to just have this display:
“My parent A”
|- Item A: …
|- Item B: …

Instead, all hell breaks loose.

I see two issues:

  1. In the grid columns, when you use grouping, it uses the “text” column of an item, instead of the actual group label.
  2. The grouping and split render does not work as expected by default.

Is there any workaround that I can use to have groupBy work?

PS: I can achieve my expected result by forgoing the grouping functionality all-together, and manipulate the data structure to have Projects->Tasks->Subtasks instead, but if I were to expand the example with multiple other dimensions, I’d prefer to use groupBy.

#2

Hello Paul,
Here is the explanation of how the grouping extension works.
If you have the String or Number value in the group property, Gantt will create group tasks from the serverList. The tasks that have the group property will be moved under these group tasks. Other tasks will be moved outside all groups. This is what you see in the snippet.
If you have the Array or Object value in the group property, Gantt will create only the group tasks from the serverList that have at least one child. The tasks that have the group property will be moved under these group tasks. Other tasks will be moved under the default group.
You can see how it works in the updated snippet:
https://snippet.dhtmlx.com/oxduyuvd
The dev team will fix that difference in the future.

Right now, there is no way to save the tree structure when you group tasks. Because of that, you cannot use the functionality of the split tasks when the tasks are grouped.
The dev team will add that feature in the future, but I cannot give you any ETA.
Also, when that feature is implemented, the subitem tasks will still be moved to the default group or outside the groups, because they don’t match any group. If you want to change how it works, you need to implement a custom solution.

The other issue with the displayed value is related to the Gantt configuration.
In the grid, you use only 2 columns that have the "something" and "columnB" values in the name parameter. And you don’t use the template function in the column configuration. So, Gantt returns the values of the something and columnB properties in the Task object. The group tasks don’t have these properties, so you see an empty string. The name of the group task is assigned to the text property, as it is a mandatory property:
https://docs.dhtmlx.com/gantt/desktop__loading.html#dataproperties
You need to manually add the properties you need to the group tasks after grouping tasks:

gantt.batchUpdate(function () {
    gantt.eachTask(function (task) {
        if (task.$virtual) {
            task.something = task.label;
        }
    })
})

Or you need to use the template function in the column configuration to return the data or HTML elements you need:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates

Here are the snippets:
https://snippet.dhtmlx.com/j0xlmyob
https://snippet.dhtmlx.com/0dph46ww

The data displayed in the task elements in the timeline is defined by the task_text template:
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html
By default, Gantt returns the value from the text property. To see a different value, you need to modify the template:

gantt.templates.task_text = function (start, end, task) {
    if (task.$virtual) {
        return task.label;
    }
    else {
        return task.something
    }
};

Here is the snippet
https://snippet.dhtmlx.com/i1woim64

1 Like