working_with_data.md

sidebar_label	Working with data
title	Working with Data
description	You can explore how to work with Data in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.

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",
        source: 1,
        target: 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, cards, and links from a local source, you can use the setConfig() or parse() method.

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

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

// or 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:

<iframe src="https://snippet.dhtmlx.com/i7j5668s?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

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:

<iframe src="https://snippet.dhtmlx.com/61crsls3?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>