Skip to main content

Initialization

This guide will give you detailed instructions on how to create Kanban on a page to enrich your application with features of the Kanban board. Take the following steps to get a ready-to-use component:

  1. Include the Kanban source files on a page.
  2. Create a container for Kanban.
  3. Initialize Kanban with a constructor.

Including source files​

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

To create Kanban, you need to include 2 source files on your page:

  • kanban.js
  • kanban.css

Make sure that you set correct relative paths to the source files:

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

Creating container​

Add a container for Kanban and give it an ID, for example "root":

index.html
<div id="root"></div>

If you want to create the widget along with its Toolbar, you need to add a separate container for it:

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

Initializing Kanban​

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

  • an HTML container (the ID of the HTML container)
  • an object with configuration properties. See the full list here
index.html
// create Kanban
new kanban.Kanban("#root", {
    // configuration properties
});

If you want to create the widget along with its Toolbar, you need to initialize it separately using the kanban.Toolbar constructor. It also takes two parameters:

  • an HTML container (the ID of the HTML container)
  • an object with configuration properties
index.html
// create Kanban
const board = new kanban.Kanban("#root", {
    // configuration properties
});

new kanban.Toolbar("#toolbar", {
    // configuration properties
});
info

To learn more about configuring the Toolbar of Kanban, read the Configuration section

Configuration properties​

note

The full list of properties to configure Kanban can be found here.
The full list of properties to configure Toolbar of Kanban can be found here.

Example​

In this snippet you can see how to initialize Kanban with the initial data: