Working with data

Initial data loading

When setting up Kanban, it's possible to pass in 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 bring in data for columns, rows, cards, and links from a local source, the parse() method works well. Just pass an object with the data you want to load.

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

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

Syncing Kanban data with Gantt and Scheduler

Here's a quick look at how Kanban data can sync up with other DHTMLX widgets like Gantt and Scheduler:

Getting Kanban data

There are a few methods available for grabbing Kanban data:

• getAreaCards() - returns an array of card data objects for a specific column (and row)
• getCard() - returns the data object for a card by its ID
• serialize() - serializes all Kanban data to JSON

Getting Kanban state

To check the state of Kanban, these methods come in handy:

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

Exporting Kanban data

When exporting Kanban data, this method is available:

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

Adding new items

To add new cards, columns, or rows, these methods are useful:

• addCard() - creates a new card in Kanban
• addColumn() - creates a new column in Kanban
• addRow() - creates a new row in Kanban

Updating items

To make changes to cards, columns, or rows, try these methods:

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

Deleting items

To remove cards, columns, or rows, the following methods are available:

• deleteCard() - deletes a card from Kanban by its ID
• deleteColumn() - deletes a column from Kanban by its ID
• deleteRow() - deletes a row from Kanban by its ID

Moving items

To move cards, columns, or rows around, these methods will help:

• moveCard() - moves a card to another column and row
• moveColumn() - moves a column to a new position
• moveRow() - moves a row to a new position

Example

Here's a snippet showing how the Kanban API can be used for working with data: