The coding sample below allows implementing swimlanes in Kanban Board. Take the opportunity to use free programming examples by Webix for your web development projects.
var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/"; var users_set = [ {id:1, value:"Rick Lopes", image:imagePath + "1.jpg"}, {id:2, value:"Martin Farrell", image:imagePath + "2.jpg"}, {id:3, value:"Douglass Moore", image:imagePath + "3.jpg"}, {id:4, value:"Eric Doe", image:imagePath + "4.jpg"}, {id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"}, {id:6, value:"Anna O'Neal"}, {id:7, value:"Marcus Storm", image:imagePath + "7.jpg"}, {id:8, value:"Nick Branson", image:imagePath + "8.jpg"}, {id:9, value:"CC", image:imagePath + "9.jpg"} ]; webix.ready(function(){ if (!webix.env.touch && webix.env.scrollSize) webix.CustomScroll.init(); webix.ui({ view:"kanban", css:"sections_with_bg", id: "board", cols:[ { header:"Backlog", body:{ view:"kanbanlist", status:"new", name:"Backlog"}}, { header:"In progress", body:{ margin:0, rows:[ { template: "<span class='webix_icon mdi mdi-code-tags'></span> Development", height: 26, css: "progress_header"}, { view:"kanbanlist", status:{ status: "work", team: 1 }, name:"Development"}, { template: "<span class='webix_icon mdi mdi-pencil'></span> Design", height: 26, css: "progress_header"}, { view:"kanbanlist", status:{ status: "work", team: 2 }, name:"Design"} ]} }, { header:"Test", body:{ view:"kanbanlist", status:"test" }}, { header:"Done", body:{ view:"kanbanlist", status:"done" }} ], data: team_task_set, tags: tags_set, users: users_set, colors: colors_set, editor:true }); });
<script src="//docs.webix.com/samples/63_kanban/common/data.js?v=6.1.2"></script> <link rel="stylesheet" type="text/css" href="//docs.webix.com/samples/63_kanban/common/style.css?v=6.1.2">