Initialization

Create a Kanban widget on a page in three steps:

1. Include source files.
2. Create a container.
3. Initialize Kanban.

Include source files

Download the package and unpack the contents into a folder of your project.

Include the following source files on your page:

• kanban.js
• kanban.css

Set correct relative paths to both files:

index.html

<script type="text/javascript" src="./dist/kanban.js"></script>  
<link rel="stylesheet" href="./dist/kanban.css">

Create a container

Add a container for Kanban and assign an ID, for example root:

index.html

<div id="root"></div>

To create the widget with a Toolbar, add a separate container for the Toolbar:

index.html

<div id="toolbar"></div> // container for Toolbar
<div id="root"></div> // container for Kanban

Initialize Kanban

Initialize Kanban with the kanban.Kanban constructor. The constructor takes two parameters:

• a CSS selector for the HTML container (or the container element itself)
• a configuration object (see the full list of properties)

The following code snippet creates a Kanban instance:

index.html

// create Kanban
new kanban.Kanban("#root", {
    // configuration properties
});

To create the widget with a Toolbar, initialize the Toolbar separately with the kanban.Toolbar constructor. The Toolbar controls operate on the Kanban instance through the api parameter. Pass board.api to bind the Toolbar to the board:

index.html

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

new kanban.Toolbar("#toolbar", {
    api: board.api, // required: links Toolbar controls to the Kanban instance
    // other configuration properties
});

info

For details on configuring the Toolbar, read the Configuration section.

Configuration properties

For the full configuration reference:

• Kanban properties overview — all Kanban configuration properties
• Toolbar properties overview — all Toolbar configuration properties

Example

The following snippet initializes Kanban with sample data: