Basic Initialization of Kanban Board, JavaScript Programming Example of Kanban Board Basic Initialization

Name: JavaScript Programming Example of Kanban Board Basic Initialization - Webix
Rating: 4.8 (47 reviews)

Home
Examples
Basic Initialization of Kanban Board

Basic Initialization of Kanban Board

Get the coding example below for initializing Webix Kanban Board. Don't miss the chance to use our free programming samples to develop high-performance business web apps.

JS Code

webix.ready(function(){
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    cols:[
      { 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" }}
    ],
    data: base_task_set
  });
});

HTML Code

<script>
  var base_task_set = [
	{ id:1, status:"new", text:"Task 1", tags:"webix,docs", comments:[{text:"Comment 1"}, {text:"Comment 2"}] },
	{ id:2, status:"work", text:"Task 2", color:"red", tags:"webix", votes:1, personId: 4  },
	{ id:3, status:"work", text:"Task 3", tags:"webix,docs", comments:[{text:"Comment 1"}], personId: 6 },
	{ id:4, status:"test", text:"Task 4 pending", tags:"webix 2.5", votes:1, personId: 5  },
	{ id:5, status:"new", text:"Task 5", tags:"webix,docs", votes:3  },
	{ id:6, status:"new", text:"Task 6", tags:"webix,kanban", comments:[{text:"Comment 1"}, {text:"Comment 2"}], personId: 2 },
	{ id:7, status:"work", text:"Task 7", tags:"webix", votes:2, personId: 7, image: "image001.png"  },
	{ id:8, status:"work", text:"Task 8", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}], votes:5, personId: 4  },
	{ id:9, status:"work", text:"Task 9", tags:"webix", votes:1, personId: 2},
	{ id:10, status:"work", text:"Task 10", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}, {text:"Comment 3"}], votes:10, personId:1 },
	{ id:11, status:"work", text:"Task 11", tags:"webix 2.5", votes:3, personId: 8 },
	{ id:12, status:"done", text:"Task 12", votes:2 , personId: 8, image: "image002.png"},
	{ id:13, status:"ready", text:"Task 14",  personId: 8}
  ];  
</script>

How to initialize Webix Kanban Board?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features