Gantt groupBy not working

Gantt
#1

Hello,

I’m new to DHTMLX and I tried using the “groupBy” method but it’s not working for me.
I’m using the PRO version. Below is my code for initializing the gantt:

componentDidMount() {
    gantt.plugins({
            grouping: true
        });

    gantt.config.columns=[
      {name:"text",       label:"Task name",  tree:true, width:'*' },
      {name:"start_date", label:"Start time", align: "center" },
      {name:"duration",   label:"Duration",   align: "center" },
      {name:"add",        label:"" }
    ];

    gantt.init('planner-container');
    gantt.resetSkin();
    gantt.resetLayout();

    const data = {
        data: [
            { id: 1, text: 'Task #1', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 0 },
            { id: 2, text: 'Task #2', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 0 },
            { id: 3, text: 'Task #3', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 1 },
            { id: 4, text: 'Task #4', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 1 },
            { id: 5, text: 'Task #5', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 2 },
            { id: 6, text: 'Task #6', start_date: '26-05-2020', duration: 3, progress: 0.6, classification: 2 },
            { id: 7, text: 'Task #7', start_date: '27-05-2020', duration: 3, progress: 0.4, classification: 2 }
        ],
        links: [
            { id: 1, source: 1, target: 2, type: '0' },
            { id: 2, source: 3, target: 4, type: '0' },
            { id: 3, source: 5, target: 6, type: '0' },
            { id: 4, source: 6, target: 7, type: '0' }
        ]
    };

    gantt.groupBy({
        relation_property: "classification",
        groups: [{key:0, label: "Pre-Planned"},{key:1, label: "Added"},{key:2, label: "Done"}],
        group_id: "key",
        group_text: "label"
    });

    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.config.scale_unit = "day";
    gantt.config.date_scale = '%d %M';
    gantt.config.scale_height = 30;
    gantt.config.task_height = 25;
    gantt.config.row_height = 40;
    gantt.config.min_column_width = 40;
    gantt.config.duration_unit = "hour"
    gantt.config.subscales = [
      { unit: 'hour', step: 1, date: '%H' }
    ];

    gantt.clearAll();
    gantt.parse(data);
    gantt.render();
  }

Below is the rendered gantt image:

41%20PM
41%20PM1133×311 30.7 KB

#2

Hi Asyong,
sorry for the delay. The gantt.groupBy() method creates virtual tasks after the Gantt is initialized on the page and before parse/load data from client-side resources. As you can see in the snippet below, three virtual tasks are rendered on the page:

http://snippet.dhtmlx.com/5/e80d67762

And now, please, compare with the case when the gantt.clearAll() method is used just after the gantt.init():

http://snippet.dhtmlx.com/5/a1974c638

This happens because, at first, the Gantt is initialized, then virtual tasks are created and rendered on the page, and only after that, the Gantt is cleared. As a result, you cannot see the result of the gantt.groupBy() method in your example.
If you want to clear all the data from the Gantt before parse/load new data, please use the gantt.clearAll() method before the gantt.groupBy() as it is shown in the snippet:

http://snippet.dhtmlx.com/5/0436385bb

1 Like
#3

Hi @Ales,

This helped a lot! thank you!

1 Like