Item DoubleClick, JavaScript Programming Example of Item DoubleClick in Kanban

Home
Examples
Item DoubleClick

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.ready(function(){
  
    webix.CustomScroll.init();
  
  webix.ui({
    type:"space",
    rows:[
      {  view: "label", label: "You can set a handler for double-click events"},
      {
        view:"kanban",
        id: "myBoard",
        type: "wide",
        on:{
          onListItemDblClick: function(id,e,node,list){
            webix.message("Item '"+this.getItem(id).text+"' has been double-clicked.");
          }
        },
        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: base_task_set
      }
    ]
  });
});

HTML Code

<link rel="stylesheet" type="text/css" href="https://docs.webix.com/samples/63_kanban/common/style.css">

<script>
  var base_task_set =[
	{ id:1, status:"new", text:"Task 1", tags:"webix,docs", comments:[{text:"Comment 1"}, {text:"Comment 2"}] },
	{ id:2, status:"work", text:"Task 2", color:"red", tags:"webix", votes:1, personId: 4  },
	{ id:3, status:"work", text:"Task 3", tags:"webix,docs", comments:[{text:"Comment 1"}], personId: 6 },
	{ id:4, status:"test", text:"Task 4 pending", tags:"webix 2.5", votes:1, personId: 5  },
	{ id:5, status:"new", text:"Task 5", tags:"webix,docs", votes:3  },
	{ id:6, status:"new", text:"Task 6", tags:"webix,kanban", comments:[{text:"Comment 1"}, {text:"Comment 2"}], personId: 2 },
	{ id:7, status:"work", text:"Task 7", tags:"webix", votes:2, personId: 7, image: "image001.png"  },
	{ id:8, status:"work", text:"Task 8", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}], votes:5, personId: 4  },
	{ id:9, status:"work", text:"Task 9", tags:"webix", votes:1, personId: 2},
	{ id:10, status:"work", text:"Task 10", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}, {text:"Comment 3"}], votes:10, personId:1 },
	{ id:11, status:"work", text:"Task 11", tags:"webix 2.5", votes:3, personId: 8 },
	{ id:12, status:"done", text:"Task 12", votes:2 , personId: 8, image: "image002.png"},
	{ id:13, status:"ready", text:"Task 14",  personId: 8}
  ];
</script>

Would you like to set Item DoubleClick in Kanban?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features