Working with data

This guide covers data operations in Kanban: loading initial data, reading and exporting data, mutating cards, columns, rows, and links, and managing comments and selection.

Load initial data

When you initialize Kanban, pass initial data through the columns, cards, rows, and links properties.

The following code snippet passes columns, cards, rows, and links data to the Kanban constructor:

const columns = [ // data for columns
    {
        label: "Backlog",
        id: "backlog"
    },
    {
        label: "In progress",
        id: "inprogress"
    },
    {
        label: "Testing",
        id: "testing"
    },
    {...}
];

const cards = [ // data for cards
    {
        id: 1,
        label: "Integration with React",
        priority: 1,
        color: "#65D3B3",
        description: "Some description...",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        progress: 25,
        users: [1,2,3,4],
        sprint: "1.0",
        column: "backlog",
        type: "feature",
        css: "red",
        votes: [4,6,9],
        comments: [
            {
                id: 1,
                userId: 9,
                cardId: 6,
                text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.",
                date: new Date(),
            },{...}
        ]
    },
    {
        id: 2,
        label: "Archive the cards/boards ",
        priority: 2,
        color: "#FFC975",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        sprint: "1.0",
        column: "backlog",
        type: "feature"
    },
    {
        label: "Searching and filtering",
        priority: 1,
        color: "#65D3B3",

        start_date: new Date("01/05/2021"),

        sprint: "1.2",
        column: "backlog",
        type: "task"
    },
    {
        label: "Set the tasks priorities",
        priority: 2,
        color: "#58C3FE",

        sprint: "1.2",
        column: "inprogress",
        type: "feature"
    },
    {...}
];

const rows = [ // data for rows
    {
        label: "Feature",
        id: "feature"
    },
    {
        label: "Task",
        id: "task",
        collapsed: true
    },
    {...}
];

const links = [
    {
        id: "link_1",
        source: 1,
        target: 2,
        relation: "relatesTo",
    },
    {...}
];

// initialize Kanban with the initial data
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

Load data from a local source

Use setConfig() or parse() to load columns, rows, cards, and links data after initialization:

const board = new kanban.Kanban("#root", {});

// load data into Kanban
board.setConfig({ columns, cards, rows });

// or board.parse({ columns, cards, rows });

Sync data with Gantt and Scheduler

For multi-widget integration, see Integration with DHTMLX widgets.

Get data

• getAreaCards() — gets data objects of all cards in the specified column (and optionally row)
• getColumnCards() — gets data objects of all cards in the specified column
• getCard() — gets a card data object by ID
• serialize() — returns Kanban data as a JSON object

Get state

• api.getReactiveState() — gets reactive properties of the DataStore
• api.getState() — gets current properties of the DataStore
• api.getStores() — returns { data: DataStore }

Export data

• export.json() — downloads Kanban data as a JSON file

Add new items

• addCard() — adds a new card
• addColumn() — adds a new column
• addRow() — adds a new row
• duplicateCard() — duplicates a card by ID

Update items

• updateCard() — updates a card by ID
• updateColumn() — updates a column by ID
• updateRow() — updates a row by ID

Delete items

• deleteCard() — removes a card by ID
• deleteColumn() — removes a column by ID
• deleteRow() — removes a row by ID

Move items

• moveCard() — moves a card to the target column and row
• moveColumn() — moves a column to a new position
• moveRow() — moves a row to a new position

Manage comments

• addComment() — adds a comment to a card by ID
• updateComment() — updates a comment by ID
• deleteComment() — deletes a comment by ID

Manage links

• addLink() — adds a new link between cards
• deleteLink() — deletes a link by ID

Manage card selection

• getSelection() — gets IDs of the currently selected cards
• selectCard() — selects a card by ID
• unselectCard() — unselects a card by ID

Example

The following snippet uses the Kanban API to manipulate data at runtime: