Working with Data

Kanban board is based on DataStore, non-hierarchical (inline) store. That's why it supports the DataStore API, including methods, events and properties.

In this chapter you will find the main Kanban features inherited from DataStore for managing data. Specific Kanban API is listed in the following 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",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
        {id:"task2", text:"Uploader for the form", status: "work", $order: 0},
        // ... other cards
    ]
});     
 
//'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 title of the item (task)
• tags - {string,array} a comma-separated list of tags or an array of IDs if the comments are in a separate data set
• $list - {numeric} the index the list in which the item is placed
• comments - {array} the list of comments or their IDs if the comments are in a separate data set
• color - {string} the color for task highlighting
• user_id - {numeric} the ID of the user to whom the task is assigned
• attachments - {array} the list of files attached to the card

Checking the existence of an item

To check if a specific item exists in the data set, you should use the exists method:

webix.ui({
    view:"kanban",
    id: "myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    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

Adding new items

You can add new cards with the add method:

$$("myBoard").add({
    text: "Kanban docs",
    status: "new",
    // ... other data fields    
});

An added item should contain the 'status' property in order to be added in one of the Kanban lists.

Changing data properties of an item

To change the current value of any item property, you should use the following technique:

var task = $$("myBoard").getItem("task1");
task.text = "Ticket 225";
 
$$("myBoard").refresh("task1");
//or
$$("myBoard").updateItem("task1", task);

Using both the refresh and updateItem methods will do the same and do not have any specificity.

Deleting items

To remove an item, you should apply the remove method to it:

// delete an item
$$("myBoard").remove(itemId);

An example of deleting a selected item is given below:

var id = $$("myBoard").getSelectedId();
if(!id){
    return webix.alert("Please selected a card that you want to remove!");
}
$$("myBoard").remove(id);

All items can be removed from Kanban board via the clearAll method:

$$("mylist").clearAll();

You can find more information about adding and removing items here.

Related sample:  Kanban: Adding New Items

Iterating data items

To iterate through the collection of data items, you should use the each method of the DataStore class.

webix.ui({
    view:"kanban",
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        { id:"task1", text:"Drag-n-drop support", status:"new", $order:0 },
        { id:"task2", text:"Uploader for the form", status:"work", $order:0 },
        // ... other cards
    ]
});
 
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 filtering to Kanban board.

You can filter data by a single property. Let's assume that you need to show only tasks assigned to a certain person:

webix.ui({
    view:"kanban", 
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"task1", text:"Drag-n-drop support", status: "new", personId: "1", ...},
        {id:"task2", text:"Uploader for the form", status: "work", personId: "2", ...},
        // ... other cards
    ]
});
 
$$("myBoard").filter("#personId#","1");

If you want to filter cards by several properties, you can set complex filtering rules. In this case you need to set a function that will return true or false. If the function returns true for an item, this item will be displayed:

webix.ui({
    view:"kanban", 
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"1", text:"Task 1", status: "new", personId: "1", projectId: "22", ...},
        {id:"2", text:"Task 2", status: "work", personId: "2", projectId: "22", ...},
        // ... other cards
    ]
});
 
$$("myBoard").filter(function(task){
    return task.personId == "1" && task.projectId == "22";
});

Related sample:  Filtering

Back to top