Group tasks by a property which have array of values not showing the default None group and not showing if array has multiple values

I’m using gantt with angular. need to use group by task which property is an array of values exactly like what is showed in group by owner in this sample Task grouping, different relation property types
Unfortunately, it doesn’t show the default group as well as multiple value rows
it groups only tasks that have one value in the array others show as a tree without any group to be specified , here is the link for the problem with more details Group tasks by a property which have array of values using angular gantt dhtmlx - Stack Overflow
any help plz

Hello Wafia,
We received your support request. I copy my response here.
We can continue the question discussing here or via email.

This is an old sample that was added to show how the vertical task reorder is working in the group mode with different relation properties:
https://docs.dhtmlx.com/gantt/samples/02_extensions/28_tasks_grouping_relation_properties.html

You cannot find that sample in the samples folder or the Gantt package:


And the sample is not listed in the sample previewer:

It seems that the sample file is not removed from our server as you can still access it.

Instead, there is a newer sample with the feature to save the tree structure:
https://docs.dhtmlx.com/gantt/samples/02_extensions/28_tasks_grouping_save_tree_structure.html

https://docs.dhtmlx.com/gantt/samples/?sample='02_extensions/28_tasks_grouping_save_tree_structure.html'&filter=''


When the tasks are grouped with the save_tree_structure config, the tree structure will be displayed only if the parent and child tasks have exactly the same group. If the group is different, the tasks will be displayed in different groups:


In your data set, it is not clear what kind of tree structure you have. If Tasks #2 and #4 should be the children of Task #1, these tasks will never be in the same group with the same tree structure.

If you have additional tasks, you will be able to see them with the tree structure in the group mode.
Here is an example:
https://snippet.dhtmlx.com/7q234ha4

Also, I see that you iterate tasks before grouping them, and you add new tasks there. The $temporary property won’t do anything here. If you want to see the cloned task only in the group mode, you need to add the $virtual property:
https://docs.dhtmlx.com/gantt/desktop__task_properties.html#:~:text=to%20this%20property.-,%24virtual,-boolean

I suppose, you tried to use the approach from the following snippet that has a custom $temporary property:
https://snippet.dhtmlx.com/5/a0bd7f367

That snippet was created before the dev team added the feature to display the tree structure in the group mode. The approach in the snippet may work only for the child tasks. You can change the relation property, and the tasks will be displayed in different groups (as you do with the code you shared):
https://snippet.dhtmlx.com/x21acv15

But it will not work for the parent tasks because the child tasks are linked to the parent tasks by the id parameter of the parent task. If the parent ID is different, the child task will never be displayed below it. There is no ready solution for that.

thanks for reply @ramil , this issue got fixed now, I fixed it by updating the server list to be exactly the same as attached in the samples … in my one it had extra attributes and use key keyword instead of id
seems there is a confusion when use id as it already used for the data
from
gantt.serverList(“goal”, [
{ id: 1, name: “Goal 1”, updated: “01-12-2023”, description: “this is first goal” },
{ id: 2, name: “Goal 2”, updated: “01-12-2023”, description: “this is first goal” },
{ id: 3, name: “Goal 3”, updated: “01-12-2023”, description: “this is first goal” },
{ id: 4, name: “Goal 4” , updated: “01-12-2023”, description: “this is first goal”},
{ id: 5, name: “Goal 5” , updated: “01-12-2023”, description: “this is first goal”},
{ id: 6, name: “Goal 6” , updated: “01-12-2023”, description: “this is first goal”},
]);
to this :
gantt.serverList(“goal”, [
{ key: 1, label: “Goal 1” },
{ key: 2, label: “Goal 2” },
{ key: 3, label: “Goal 3” },
{ key: 4, label: “Goal 4” },
{ key: 5, label: “Goal 5” },
{ key: 6, label: “Goal 6” },
]);

Hello Wafia,
Thank you for the clarification.
There is nothing wrong when you have additional properties in the serverList array.
However, when Gantt groups tasks, it creates temporary tasks that are removed next time you call the groupBy method. When Gantt does that, it adds the group_id and group_text parameters from the properties to these tasks. You cannot use the id parameter as each task (including the temporary virtual tasks) has its own id parameter. Otherwise, it may break the tree structure. I will ask the technical writer to add that information to the documentation.

Also, when the tasks are grouped, you should be able to show group names from any property specified in the group_text parameter (of course, except the id parameter). But now it works only with the text and label parameters. So, it should be a bug in Gantt. I will add it to our internal bug tracker. The dev team will fix the bug in the future, but I cannot give you any ETA.

1 Like