Skip to main content

Working with data

Initial data loading

When initializing Kanban, you need to provide the initial data for columns, cards and rows.

note

The data for columns and cards are mandatory!

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"
},
{
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
}
];

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

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. Before parsing the data in this way, you need to set the columns, cards and rows properties to an empty array in the Kanban configuration object.

const board = new kanban.Kanban("#root", {
columns: [],
cards: [],
rows: []
});

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

Adding new items

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

Updating items

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

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 cards

To move the card to the desired column and row, you can use the moveCard() method.

Example

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