Working with Data

Kanban board is based on DataStore, a 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 data management features that Kanban inherits from DataStore. The Kanban-specific API is listed in the following articles: Specific API Reference and Handling Events with Kanban Board.

To get the data item object, 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 has 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 tags are in a separate data set
• $list - {numeric} the index of 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

To check if a specific item exists in the data set, 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

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 to be added to one of the Kanban lists.

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

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

The refresh and updateItem methods produce the same result.

To remove an item, 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 select a card that you want to remove!");
}
$$("myBoard").remove(id);

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

$$("myBoard").clearAll();

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

Related sample:  Kanban: Adding New Items

To iterate through the collection of data items, 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 equivalent to a standard 'for' loop:

for (i = 0; i < data.length; i++ ){
    titles.push(obj.text);
}

If you need to show only part of the loaded data according to a certain rule, you can apply filtering to the 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 returns 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