You can effortlessly fine-tune your Webix Kanban by setting Item Click. You can do it by means of our programming sample. Don't hesitate to use this piece of code. It's at your service for free..
webix.CustomScroll.init();
webix.ui({
type:"space",
rows:[
{ view: "label", label: "It is possible to process clicks and selection in lists"},
{
view:"kanban",
id: "myBoard",
type: "wide",
on:{
onListItemClick: function(id,e,node,list){
webix.message("Item '"+this.getItem(id).text+"' has been clicked.");
},
onListBeforeSelect: function(id,state,list){
webix.message("Item '"+this.getItem(id).text+"' will be selected.");
return true;
},
onListAfterSelect: function(id,state,list){
webix.message("Item '"+this.getItem(id).text+"' has been selected.");
}
},
cols:[
{ header:"Backlog",
body:{ view:"kanbanlist", status:"new", type: "avatars"}
},
{ header:"In Progress",
body:{ view:"kanbanlist", status:"work", type: "avatars"}
},
{ header:"Testing",
body:{ view:"kanbanlist", status:"test", type: "avatars"}
},
{ header:"Done",
body:{ view:"kanbanlist", status:"done", type: "avatars"}
}
],
users:users_set,
tags:tags_set,
data: full_task_set
}
]
});
<script> var path = "https://docs.webix.com/samples/63_kanban/"; var users_set = [ {id:1, value:"Rick Lopes", image:path+"common/imgs/1.jpg"}, {id:2, value:"Martin Farrell", image:path+"common/imgs/2.jpg"}, {id:3, value:"Douglass Moore", image:path+"common/imgs/3.jpg"}, {id:4, value:"Eric Doe", image:path+"common/imgs/4.jpg"}, {id:5, value:"Sophi Elliman", image:path+"common/imgs/5.jpg"}, {id:6, value:"Anna O'Neal"}, {id:7, value:"Marcus Storm", image:path+"common/imgs/7.jpg"}, {id:8, value:"Nick Branson", image:path+"common/imgs/8.jpg"}, {id:9, value:"CC", image:path+"common/imgs/9.jpg"} ]; var tags_set = [ {id:1, value:"webix"}, {id:2, value:"jet"}, {id:3, value:"easy"}, {id:4, value:"hard"}, {id:5, value:"kanban"}, {id:6, value:"docs"}, ]; var full_task_set = [ { id:1, status:"new", text:"Test new authentification service", tags:[1,2,3] }, { id:2, status:"work", user_id: 5, text:"Performance tests", tags:[1] }, { id:3, status:"work", user_id: 6, text:"Kanban tutorial", tags:[2] }, { id:4, status:"work", user_id: 3, text:"SpreadSheet NodeJS", tags:[3] }, { id:5, status:"test", user_id: 9, text:"Portlets view", tags:[4,2] }, { id:6, status:"new", user_id: 7, text:"Form Builder", tags:[4,6] }, { id:7, status:"test", text:"Code Snippet", tags:[1,2,3] }, { id:8, status:"work", user_id: 1, text:"Backend integration", tags:[5] }, { id:9, status:"work", user_id: 2, text:"Drag-n-drop with shifting cards", tags:[5] }, { id:10, status:"work", user_id: 4, text:"Webix Jet 2.0", tags:[4] }, { id:11, status:"test", user_id: 9, text:"Chat app interface", tags:[4,2] }, { id:12, status:"done", user_id: 8, text:"Material skin", tags:[4,6] } ]; </script>