Working with data

Initial data loading

When initializing Kanban, you can provide the initial data for columns, cards, rows and links.

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",
        masterId: 1,
        slaveId: 2,
        relation: "relatesTo",
    },
    {...}
];

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

Loading data from local source

To load data for columns, rows and cards from a local source, you can use the parse() method. It takes an object with the needed data as a parameter.

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

// loading data into Kanban
board.parse({ columns, cards, rows });

Syncing Kanban data with Gantt and Scheduler

In this snippet you can see how to sync Kanban data with other DHTMLX widgets, namely Gantt and Scheduler:

Getting Kanban data

To get Kanban data, you can use the following methods:

• getAreaCards() - gets an array with data objects of all cards of the specified column (and row)
• getCard() - gets a data object of a card by the specified ID
• serialize() - serializes Kanban data to JSON

Getting Kanban state

To get Kanban state, you can use the following methods:

• api.getReactiveState() - gets an object with the reactive properties of the StateStore
• api.getState() - gets an object with the current properties of the StateStore
• api.getStores() - gets an object with the StateStore and DataStore objects

Exporting Kanban data

To export Kanban data, you can use the following method:

• export.json() - exports data of Kanban to a JSON file

Adding new items

To add new cards, columns and rows, you can use the following methods:

• addCard() - adds a new card into Kanban
• addColumn() - adds a new column into Kanban
• addRow() - adds a new row into Kanban

Updating items

To update the cards, columns and rows, you can use the following methods:

• updateCard() - updates the card data by the specified ID
• updateColumn() - updates the column data by the specified ID
• updateRow() - updates the row data by the specified ID

Deleting items

To remove the cards, columns and rows, you can use the following methods:

• deleteCard() - removes a card from Kanban by the specified ID
• deleteColumn() - removes a column from Kanban by the specified ID
• deleteRow() - removes a row from Kanban by the specified ID

Moving items

To move the cards, columns and rows, you can use the following methods:

• moveCard() - moves a card to the desired column and row
• moveColumn() - moves a column to the desired position
• moveRow() - moves a row to the desired position

Example

In this snippet you can see how to use Kanban API for working with data: