Item Styling, JavaScript Programming Example of Kanban Item Styling

Item Styling, JavaScript Programming Example of Kanban Item Styling

If you want to set some background color to an item in Kanban Board, use the programming example below. Feel free to use the coding samples by Webix to accelerate and facilitate 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:"In Progress", body:{ view:"kanbanlist", status:"work" }},
      { header:"Testing", body:{ view:"kanbanlist", status:"test" }},
      { header:"Done", body:{ view:"kanbanlist", status:"done" }}
    ],
    data: [
      { id:1, status:"new", text:"Task 1 (critical)", tags:"webix,docs", $css: "critical" },
      { id:2, status:"new", text:"Task 2", tags:"webix" },
      { id:3, status:"work", text:"Task 3", tags:"webix,docs" },
      { id:4, status:"work", text:"Task 4", tags:"webix" }
    ]
  });
});

HTML Code

<style>
  .critical .webix_kanban_list_content{
  	background-color: #fff2c1;
  	border-color:  #e0d7b7;
  	border-left-color:  #f5cf3d;
  }
  .critical.webix_selected .webix_kanban_list_content{
  	background-color: #fff1a2;
  }
</style>