If you need to apply filtering to Kanban Board, use the programming example below. You can filter data by a single or several properties. It's also possible to set complex filtering rules. Feel free to use the coding samples by Webix to build custom business software solutions.
webix.type(webix.ui.dataview,{
name: "avatars",
width: 80,
height: 80,
template: function(obj){
var name = obj.name.split(" ");
return '<img class="large_avatar" src="https://docs.webix.com/samples/63_kanban/common/imgs/'+obj.id+'.jpg" title="'+obj.name+'"/><div class="name">'+name[0]+'</div>';
}
});
function reset(){
$$("myBoard").filter("","");
$$("staffList").unselect();
}
webix.ready(function(){
webix.CustomScroll.init();
webix.ui({
rows:[
{
css: "toolbar",
borderless: true,
paddingY:7,
paddingX:10,
margin: 7,
cols:[
{ view: "label", label: "Choose a person to see assigned tasks"}
]
},
{
css: "shadow",
type:"space",
borderless: true,
cols:[
{
type: "form",
rows:[
{
id: "staffList",
view: "dataview",
xCount: 3,
borderless: true,
css: "members",
select: true,
autoheight:true,
item:"avatars",
on:{
onItemClick: function(id){
$$("myBoard").filter("#personId#",id);
}
},
data: staff
},
{
view: "button", type: "form", label: "Reset filter", click: reset
},
{ }
]
},
{
view:"kanban",
id: "myBoard",
type: "wide",
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"}}
],
data:base_task_set
}
]
}
]
});
});
<link rel="stylesheet" type="text/css" href="https://docs.webix.com/samples/63_kanban/common/style.css"> <style> .toolbar{ background-color: #f8f8f8; } .shadow{ box-shadow: inset 0 1px 3px #aaa; } </style> <script> var staff = [ {id:1, name:"Rick Lopes"}, {id:2, name:"Martin Farrell"}, {id:3, name:"Douglass Moore"}, {id:4, name:"Eric Doe"}, {id:5, name:"Sophi Elliman"}, {id:6, name:"Anna O'Neal"}, {id:7, name:"Marcus Storm"}, {id:8, name:"Nick Branson"} ]; 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>