Item DoubleClick, JavaScript Programming Example of Item DoubleClick in Kanban

JavaScript Programming Example of Item DoubleClick in Kanban

Item Double Click allows the users of Webix Kanban to select items with tasks in the most convenient and familiar way. You can find a free coding sample of how to add Item Double Click to Kanban below.

JS Code

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>