Swimlanes with Multiple Columns, JavaScript Programming Example of Swimlanes with Multiple Columns in Kanban

JavaScript Programming Example of Swimlanes with Multiple Columns in Kanban

This programming example shows how to implement Swimlanes with multiple columns in your Kanban board. Don't hesitate to use this piece of code in your projects. All coding samples in this section are free of charge.

JS Code

webix.ready(function(){
  var staff= [
    {id:1, name:"Paul"},
    {id:2, name:"Vera"},
    {id:3, name:"Tomas"}
  ];

  var getRows = function(statuses){
    var rows = [];
    for(var i=0;i < staff.length; i++){
      rows.push({ template: staff[i].name, height: 27, css: "user_header"});
      var cols = [];
      for(var j=0; j< statuses.length; j++){
        cols.push({ view:"kanbanlist", type: "users", status:{ status: statuses[j], user: staff[i].id }})
      }
      rows.push({cols: cols});
    }
    return rows;
  };

  webix.ui({
    view:"kanban",
    id: "board",
    padding: 5,
    margin: 5,
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", type: "users" }},
      {
        type: "line",
        gravity:2,
        rows:[
          {
            cols:[
              {template: "In Progress", type: "header"},
              {template: "Testing", type: "header"}
            ]
          },
          {
            rows: getRows(["work","test"])
          }
        ]

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

HTML Code

<script>
  var user_task_set =[
	{ id:1, status:"new", text:"Test new authentification service", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}] },
	{ id:2, status:"work", user: 1, text:"Performance tests", color:"red", tags:"webix"  },
	{ id:3, status:"work", user: 2, text:"Kanban tutorial", tags:"webix,docs", comments:[{text:"Comment 1"}] },
	{ id:4, status:"work", user: 3, text:"SpreadSheet NodeJS", tags:"webix 3.0"  },
	{ id:5, status:"test", user: 3, text:"Portlets view", tags:"webix 2.5"  }
  ];
</script>