Rows and Columns in Kanban, JavaScript Programming Example of Rows and Columns in Kanban

JavaScript Programming Example of Rows and Columns in Kanban

Get the piece of code below for creating a complex layout in Kanban Board. Don't hesitate to use free coding samples by Webix to facilitate and accelerate the process of web development.

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:"Ready", gravity: 3,
       body:{ type:"clean",
             rows:[
               { view:"kanbandataview", status:"ready", gravity: 0.5  },
               { type:"space", paddingX:0,
                cols:[
                  { header:"In Progress",
                   body:{ view:"kanbanlist", status:"work"}},
                  { header:"Testing",
                   body:{ view:"kanbanlist", status:"test"  }},
                  { header:"Done",
                   body:{ view:"kanbanlist", status:"done"  }}
                ]
               }
             ]
            }
      }
    ],
    data:task_set
  });
});

HTML Code

<script src="//docs.webix.com/samples/63_kanban/common/data.js"></script>