Hi,
This is possible, for example the following code shows how to fetch tasks from rest api and set the Kanban’s data source:
const kanban = document.getElementById("kanban");
// 1. Fetch data from REST API
async function loadTasks() {
const res = await fetch("/api/tasks");
const tasks = await res.json();
// Load into the Kanban board
kanban.columns = [
{ label: "To Do", dataField: "todo" },
{ label: "In Progress", dataField: "inprogress" },
{ label: "Done", dataField: "done" }
];
kanban.dataSource = tasks;
}
// 2. Listen for card movement and update REST API
kanban.addEventListener("change", async (event) => {
if (event.detail.type === "update") {
const { id, status } = event.detail.item;
await fetch(<code>/api/tasks/${id}</code>, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ status })
});
}
});
// Load tasks on startup
loadTasks();
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/