Group tasks by a property which have array of values using angular gantt dhtmlx

Question

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 code snippt from timeline component to do grouping

setGroupingResources(gantt: any) {
    _.forOwn(this.groupingResources, (data: [], key: String) => {
      gantt.serverList(key, data);
    });
  }

  groupView (gantt: any) {
    gantt.$groupMode = !gantt.$groupMode;
    if (!this.groupByProperty) {
      gantt.groupBy(false);
      return;
    }
    gantt.eachTask((task: any) => {
      if(!task[this.groupByProperty]) task[this.groupByProperty] = 0
      if (task[this.groupByProperty] instanceof Array) {
        var values = task[this.groupByProperty];
        for (var i = 0; i < values.length; i++) {
          task.original_id = task.id;
          gantt.updateTask(task.id)
          var clone = gantt.copy(task);
          clone.original_id = clone.id
          clone.id = gantt.uid();
          clone[this.groupByProperty] = values[i];
          clone.$temporary = true;
          gantt.addTask(clone);
          var clone = gantt.getTask(clone.id);
          clone.parent = clone.$rendered_parent;
        }
      }
    })
    gantt.groupBy({
      groups: gantt.serverList(this.groupByProperty) ,
      relation_property: this.groupByProperty,
      group_id: 'id',
      group_text: 'name',
      delimiter: ", ",
      save_tree_structure: true
    });

  }
ngOnChanges(changes: SimpleChanges) {
    if (!this._gantt) return; 
     this.groupingResources = changes['groupingResources'] && changes['groupingResources'].currentValue || this.groupingResources;
    this.groupByProperty = changes['groupByProperty'] && changes['groupByProperty'].currentValue || this.groupByProperty;
this._gantt.clearAll();
    if (changes['groupingResources']) this.setGroupingResources(this._gantt);
    this.groupView(this._gantt)
    this._gantt.parse({ data: this.data, links: this.links });
    this._gantt.render();
}

here is a sample of my data array 
[
  {
    id: 1,
    name: "task #1",
    goal: [1, 2],
  },
  {
    id: 2,
    name: "task #2",
    goal: [1],
  },
  {
    id: 3,
    name: "task #3",
    goal: [],
  },
  {
    id: 4,
    name: "task #4",
    goal: [2],
  },
  {
    id: 5,
    name: "task #5",
    goal: [5, 6],
  },
];

Answer 1

It seems to be related to the same issue you already reported. Please don't ask the same questions in different places. Let's continue our discussion via email or in the following topic on the forum: https://forum.dhtmlx.com/t/group-tasks-by-a-property-which-have-array-of-values-not-showing-the-default-none-group-and-not-showing-if-array-has-multiple-values/76279