NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Kanban Avatar Click, JavaScript Programming Example of Kanban Avatar Click

JavaScript Programming Example of Kanban Avatar Click

Webix Kanban allows you to add task cards with avatars to the board. You can also initialize an avatar click. In this case, you can change the agent of the task by clicking on his or her image. See the example of how you can do it below.

JS Code

webix.ready(function(){
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    id: "myBoard",
    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"}
      }
    ],
    on:{
      onAvatarClick: function(id){
      	webix.message("Avatar for item "+id+" was clicked");
      }
    },
    userList:true,
    data: full_task_set,
    tags: tags_set,
    users: users_set
  });
});

HTML Code

<script src="https://docs.webix.com/samples/63_kanban/common/data.js"></script>
<script>
var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/";
var users_set = [
	{id:1, value:"Rick Lopes", image:imagePath + "1.jpg"},
	{id:2, value:"Martin Farrell", image:imagePath + "2.jpg"},
	{id:3, value:"Douglass Moore", image:imagePath + "3.jpg"},
	{id:4, value:"Eric Doe", image:imagePath + "4.jpg"},
	{id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"},
	{id:6, value:"Anna O'Neal"},
	{id:7, value:"Marcus Storm", image:imagePath + "7.jpg"},
	{id:8, value:"Nick Branson", image:imagePath + "8.jpg"},
	{id:9, value:"CC", image:imagePath + "9.jpg"}
];
</script>

JS Code

webix.ready(function(){
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    id: "myBoard",
    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"}
      }
    ],
    on:{
      onAvatarClick: function(id){
      	webix.message("Avatar for item "+id+" was clicked");
      }
    },
    userList:true,
    data: full_task_set,
    tags: tags_set,
    users: users_set
  });
});

HTML Code

<script src="https://docs.webix.com/samples/63_kanban/common/data.js"></script>
<script>
var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/";
var users_set = [
	{id:1, value:"Rick Lopes", image:imagePath + "1.jpg"},
	{id:2, value:"Martin Farrell", image:imagePath + "2.jpg"},
	{id:3, value:"Douglass Moore", image:imagePath + "3.jpg"},
	{id:4, value:"Eric Doe", image:imagePath + "4.jpg"},
	{id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"},
	{id:6, value:"Anna O'Neal"},
	{id:7, value:"Marcus Storm", image:imagePath + "7.jpg"},
	{id:8, value:"Nick Branson", image:imagePath + "8.jpg"},
	{id:9, value:"CC", image:imagePath + "9.jpg"}
];
</script>