Layout in Kanban, JavaScript Programming Example of Layout in Kanban

JavaScript Programming Example of Layout in Kanban

In case you need to set a definite number of columns and subcolumns with headers in Kanban Board, use the programming example below. You can get the coding samples by Webix for free.

JS Code

webix.ready(function(){
  if (!webix.env.touch && webix.env.scrollSize)
    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", gravity: 1.3,
       body:{
         type:"wide",
         css:"sections_with_bg",
         cols:[
           {
             paddingY:10, rows:[
               { view:"kanbanheader", type:"sub", label: "Ready to test"},
               { view:"kanbanlist", status:"ready"}
             ]

           },
           {
             paddingY:10, rows:[
               { view:"kanbanheader", type:"sub", label: "In test"},
               { view:"kanbanlist", status:"test"}
             ]
           }
         ]

       }},
      { header:"Done",
       body:{ view:"kanbanlist", status:"done" }}
    ],
    data:base_task_set
  });
});

HTML Code

<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">

How to set a definite number of columns and subcolumns with headers in Kanban Board?