Reply To: Programmatically adding elements to GanttChart

[Hristofor]

Hi ggavrilut,
Gantt Chart projects with tasks attribute can only be initialized through the dataSource property or via the insertTask method. Setting the tasks attribute of a project dynamically (after initialization) will not affect the element. Here is an example on how to add a new Project with two child tasks to the end of the task list ( or at index 99 there are many items present) dynamically via the insertTask method:

document.querySelector('smart-gantt-chart').insertTask(99, {
label: 'New Parent Project',
dateStart: '2020-02-17',
dateEnd: '2020-05-04',
tasks: [
{
label: 'SubTask 1',
dateStart: '2020-03-17',
dateEnd: '2020-04-25'
},
{
label: 'SubTask 2',
dateStart: '2020-04-17',
dateEnd: '2020-06-25'
}
]
})

Another approach is to directly set a new project/task structure to the dataSource property with the changes that you want to make. In order to do so, first get the current dataSource by calling ganttChart.dataSource. This will return the current structure of the GanttChart tasks and projects. Then modify the dataSource by adding new tasks/projects and re-set it again as the new dataSource – ganttChart.dataSource = newDataSource.
Regarding your approach:
There seems to be an issue with the addTask method by not removing the task before it is added to the new project. However that method will not be part of the API of the new upcoming GanttChart major update this month.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com