Kanban board is based on DataStore, non-hierarchical (inline) store. That's why it supports all the DataStore API, including methods, events and properties.
In this chapter you'll find the description of main Kanban features inherited from DataStore that allow managing data. Specific Kanban API is listed in the articles API Reference and Handling Events.
To get the data item object, you should use the getItem method:
webix.ui({
view:"kanban",
id: "myBoard",
...
data:[
{id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
{id:"task2", text:"Uploader for the form", status: "work", $order: 0},
...
]
});
//'task' variable will contain an object of the related kanban record
var task = $$("myBoard").getItem("task1");
//you can access data members directly
var title = task.text;//-> "Drag-n-drop support"
The getItem() method returns the object of the data item that possesses a unique id and a set of other properties:
To check whether a specific item exists in the data set, you should use the exists method:
var myBoard = webix.ui({
view:"kanban",
...
data:[
{id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
{id:"task2", text:"Uploader for the form", status: "work", $order: 0}
]
});
myBoard.exists("task1");// -> true
myBoard.exists("task2222");// -> false
To change the current value of some item's property, you should use the following technique:
var task = myBoard.getItem("task1");
task.text = "Ticket 225";
myBoard.refresh("task1");
//or
myBoard.updateItem("task1", task);
Methods refresh and updateItem lead to one and the same result and don't have any specificity.
To iterate through the collection of data items, you should use the each method of the DataStore class.
var myBoard = webix.ui({
view:"kanban",
...
data:[
{id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
{id:"task2", text:"Uploader for the form", status: "work", $order: 0},
...
]
});
var titles =[];
myBoard.data.each(function(obj){ titles.push(obj.text); });
//-> titles=["Drag-n-drop support", "Uploader for the form"]
The code is equal to a standard 'for'-loop:
for(i = 0; i<data.length; i++ ){
titles.push(obj.text);
}
If you need to show only a part of loaded data, depending on a certain rule, you can apply the filtering technique to Kanban board.
It is possible to filter data by a single property. Let's assume that we need to show only tasks assigned to a certain person:
var myBoard = webix.ui({
view:"kanban",
...
data:[
{id:"task1", text:"Drag-n-drop support", status: "new", personId: "1", ...},
{id:"task2", text:"Uploader for the form", status: "work", personId: "2", ...},
...
]
});
$$("myBoard").filter("#personId#","1");
Or you can set complex filtering rules. In this case you need to set a function that will return true or false value. If function returns true for an item, this item will be displayed:
var myBoard = webix.ui({
view:"kanban",
...
data:[
{id:"1", text:"Task 1", status: "new", personId: "1", projectId: "22", ...},
{id:"2", text:"Task 2", status: "work", personId: "2", projectId: "22", ...},
...
]
});
$$("myBoard").filter(function(task){
return task.personId == "1" && task.projectId == "22";
});
Back to top