Working with Data

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 Specific API Reference and Handling Events with Kanban Board.

Getting the item object

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:

  • status - {string} the item's status, defines the list in which the item will be shown (obligatory)
  • text - {string} the item's(task's) title
  • tags - {string} a comma-separated list of tags (optional)
  • $index - {numeric} the task's position in the list that the item relates to (optional)

Checking the existence of an item

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

Changing data properties of an item

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.

Iterating data items

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

Filtering

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

Related sample:  Filtering

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui library and page of kanban board product.