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/
.
