How to update/refresh start date in dhtmlx gantt chart for all tasks with different date value

Question

I am using dhtmlx gantt chart, I am updating the 'start date' for all the tasks with same date value. But I need to update with different value using newjson array of object in the code. When you click each task date will be updated.Here is the code below. Javascript part should be below body tag

html

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
  <script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
  <style>
    .gantt_custom_button {
      background-color: rgb(206, 206, 206);
      position: absolute;
      right: -10px;
      top: 5px;
      width: 20px;
      height: 26px;
      border-radius: 0;
    }
  </style>


</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>

<body>
  <script>
    var task1 = {
      'data': [{
          'id': 1,
          'text': 'Project #1',
          'start_date': '01-04-2019',
          'duration': 2,
          'order': 10,
          'progress': 0.4,
          'open': true
        },
        {
          'id': 2,
          'text': 'Task #1',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 3,
          'text': 'Task #2',
          'start_date': '03-04-2019',
          'duration': 2,
          'order': 20,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 4,
          'text': 'Task #3',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        }

      ],
      'links': [{
          'id': 1,
          'source': 1,
          'target': 2,
          'type': '1'
        },
        {
          'id': 2,
          'source': 2,
          'target': 3,
          'type': '0'
        },
        {
          'id': 3,
          'source': 3,
          'target': 4,
          'type': '0'
        },
        {
          'id': 4,
          'source': 2,
          'target': 5,
          'type': '2'
        }
      ]
    };
    const CellDisplay = item => {
      switch (item) {
        case 'item1':
          return 'one';
        case 'item2':
          return 'two';
        case 'item3':
          return 'three';
        case 'item4':
          return 'four';
        case 'item5':
          return 'five';
      }
    };
    const forLaunch = lData => {
      const scale = {
        unit: 'day',
        step: 1,
        format: date => {
          for (const key in lData) {
            console.log(key);
            return CellDisplay(key);
          }
        }
      };
      return scale;
    };
    gantt.config['scales'] = [{
      unit: 'day',
      step: 1,
      format: '%d %M'
    }];
    const Obj = [{
      Id: 575,
      items: {
        item1: '2020-12-08T10:00:00.000+0000',
        item2: '2020-11-12T00:00:00.000+0000',
        item3: '2020-12-08T10:00:00.000+0000',
        item4: null,
        item5: '2020-12-08T10:00:00.000+0000'
      },
      active: false
    }];
    Obj.forEach(data => {
      gantt.config['scales'].unshift(forLaunch(data.items));
    });
    gantt.init('gantt_here');
    gantt.parse(task1);
  </script>

</html>

score 0 · Answer 1 · answered Dec 14 '20 at 11:21

It is not a good idea to update the task data in a template. If you want to update a task after clicking on it, it is better to use the onTaskClick event handler:

https://docs.dhtmlx.com/gantt/api__gantt_ontaskclick_event.html

You can use the eachTask method where you can specify the parent ID as the second parameter. Then, Gantt will iterate all children of the specified task:

https://docs.dhtmlx.com/gantt/api__gantt_eachtask.html

The batchUpdate function will tell Gantt to repaint the changes only once:

https://docs.dhtmlx.com/gantt/api__gantt_batchupdate.html

Also, you need to update the subtask's end_date parameter or its duration will change:

https://docs.dhtmlx.com/gantt/api__gantt_calculateenddate.html

Here is the snippet:

http://snippet.dhtmlx.com/5/0871f77f5

How to update/refresh start date in dhtmlx gantt chart for all tasks with different date value

html

1 Answers1