Creating Kanban Board on a Page

In order to start using Kanban Board, you need to initialize it on a page. It requires 2 simple steps:

  1. Include the necessary JS and CSS files into an HTML file.
  2. Call the object constructor.

Included files

There are 4 files that you need to include:

<!-- js files -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script src="codebase/kanban/kanban.js" type="text/javascript"></script>
<!-- css files -->
<link rel="stylesheet" href="codebase/webix.css" 
    type="text/css" charset="utf-8">
<link rel="stylesheet" href="codebase/kanban/kanban.css" 
    type="text/css" charset="utf-8">


Use the following code to initialize Webix Kanban Board:

/* webix.ready() function ensures 
that the code will be executed when the page is loaded
    // object constructor
        // the structure of columns on the board
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            { header:"In Progress",
                body:{ view:"kanbanlist", status:"work" }},
            { header:"Testing",
                body:{ view:"kanbanlist", status:"test" }},
            { header:"Done",
                body:{ view:"kanbanlist", status:"done" }}
        // url to the file with data collection
        url: "/data/tasks"

Related sample:  Basic Init of Kanban Board

Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of kanban board tool product.