OnClick for Elements inside Items, JavaScript Programming Example of OnClick for Elements inside the Items in Kanban

JavaScript Programming Example of OnClick for Elements inside the Items in Kanban

Thanks to onClick, you can set handlers for inner elements of list items, e.g., for images. Have a look at the preview and the coding example below to see how onClick works.

JS Code

webix.type(webix.ui.kanbanlist,{
  name: "images",
  // template for item body
  // show item image and text
  templateBody: function(obj){
    var html = "";
    if(obj.image)
      html += "<img class='image' src='https://docs.webix.com/samples/63_kanban/common/imgs/attachments/"+obj.image+"'/>";
    html += "<div>"+obj.text+"</div>";
    return html;
  }
});


webix.ready(function(){
  webix.ui({
    type:"space",
    rows:[
      {  view: "label", label: "You can set onclick handlers for inner elements of list items (for example images)"},
      {
        id: "board",
        view:"kanban",
        type:"wide",
        cols:[
          { header:"Backlog",
           body:{ view:"kanbanlist", status:"new", type: "images" }},
          { header:"In Progress",
           body:{ view:"kanbanlist", status:"work", type: "images"}
          },
          { header:"Testing",
           body:{ view:"kanbanlist", status:"test", type: "images" }},
          { header:"Done",
           body:{ view:"kanbanlist", status:"done", type: "images" }}
        ],
        data: base_task_set
      }
    ]
  });

  // set onclick event handler in each Kanban LIst
  // for elements with "image" className
  $$("board").eachList(function(list,status){
    list.on_click["image"] =  function(e,id){
      webix.alert("'"+ this.getItem(id).image+"' has been clicked");
    };
  });
});

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 take advantage of Webix Kanban with OnClick?