Reply To: Any community tips or tricks for: Gantt?

[Markov]

Hi,

Yes, this is possible. As a solution look at the following code which fetches data from a server and data binds the Gantt chart to it.

// assume we have <smart-gantt-chart id="gantt"></smart-gantt-chart> in HTML
const gantt = document.getElementById('gantt');

// Function to map server model → Gantt model
function mapServerToGantt(serverTasks, serverLinks) {
  return {
    // the Gantt expects tasks + links (or inside dataSource)
    tasks: serverTasks.map(t => ({
      id: t.id,
      label: t.name,
      dateStart: t.startDate,
      dateEnd: t.endDate,
      progress: t.progress,
      // etc.
    })),
    links: serverLinks.map(l => ({
      id: l.id,
      source: l.fromTaskId,
      target: l.toTaskId,
      type: l.type  // e.g. “finish-to-start”
    }))
  }
}

// Initial load
fetch('/api/tasks')
  .then(r => r.json())
  .then(data => {
    const mapped = mapServerToGantt(data.tasks, data.links);
    gantt.dataSource = mapped;
  })
  .catch(err => {
    console.error('failed load tasks', err);
  });

// Listen for changes
gantt.addEventListener('onTaskChanged', (e) => {
  const changed = e.detail;  // depending on library’s event payload
  // you’ll have to inspect the event shape from the api docs
  fetch(<code>/api/tasks/${changed.id}</code>, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      startDate: changed.dateStart,
      endDate: changed.dateEnd,
      progress: changed.progress
    })
  }).then(/* … */).catch(/* … */);
});

// Similar for link-add / link-delete, etc.
gantt.addEventListener('onLinkAdded', (e) => {
  const link = e.detail;
  fetch('/api/links', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      source: link.source,
      target: link.target,
      type: link.type
    })
  }).then(/* … */).catch(/* … */);
});

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/