Item Styling, JavaScript Programming Example of Kanban Item Styling

Home
Examples
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(){
  webix.ui({
    view:"kanban", type:"space",
    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

<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
  
<style>
  .critical .webix_kanban_list_content{
    background-color: #fff2c1;
    border-color:  #e0d7b7;
    border-left-color:  #f5cf3d;
  }
</style>

How to set a background color to an item in Kanban Board?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features