Filtering in Kanban, JavaScript Programming Example of Filtering in Kanban

Home
Examples
Filtering in Kanban

Filtering in Kanban, JavaScript Programming Example of Filtering in Kanban

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.

JS Code

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
          }
        ]
      }
    ]
  });
});

HTML Code

<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>

How to apply filtering to Kanban Board?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features