Skip to main content

Working with data

Initial data loading

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

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,
cards,
rows
});

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:

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