Item Click in Kanban, JavaScript Programming Example of Item Click in Kanban

Home
Examples
Item Click in Kanban

JavaScript Programming Example of Item Click in Kanban

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..

JS Code

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
    }
  ]
});

HTML Code

<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>

Would you like to set Item Click in Kanban?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features