#113237
Markov
Keymaster

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/