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

This is a list of properties that you can specify in the Kanban and Toolbar configuration objects:

  • cards - (array) an array of objects containing the cards data. This parameter is mandatory

  • cardShape - (object) an object of the card settings

  • cardTemplate - (function) returns and applies a new HTML template of the card

  • columnKey - (string) defines belonging the card to the column

  • columns - (array) an array of objects containing the columns data. This parameter is mandatory

  • editorAutoSave - (boolean) enables/disables an autosave mode of the Editor

  • editorShape - (object) an object of the editor settings

  • locale - (object) an object of the built-in or custom locale

  • readonly - (string or object) enables/disables editing, adding, selecting, dragging of the cards

  • rowKey - (string) defines belonging the card to the row

  • rows - (array) an array of objects containing the rows data

  • (Toolbar) api - (object) an object with the internal api of Kanban. It is used for Toolbar controls functionality

  • (Toolbar) items - (array) an array of controls located in the toolbar of Kanban.

Example

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