API overview

Kanban constructor

new kanban.Kanban("#root", {
    // configuration parameters
});

Parameters:

• the HTML container (specified by the container's ID)
• an object containing configuration options (see details)

Toolbar constructor

new kanban.Toolbar("#toolbar", {
    // configuration parameters
});

Parameters:

• the HTML container (specified by the container's ID)
• an object containing configuration options (see details)

Kanban methods

Name	Description
addCard()	Inserts a new card into the Kanban board
addColumn()	Inserts a new column into the Kanban board
addComment()	Inserts a new comment into the specified card using its ID
addLink()	Inserts a new link into the Kanban board
addRow()	Inserts a new row into the Kanban board
deleteCard()	Deletes the specified card from the Kanban datastore.
deleteColumn()	Deletes a specific column from the Kanban datastore
deleteComment()	Removes a comment from a card by specifying its ID
deleteLink()	Deletes a specific link from the Kanban datastore.
deleteRow()	Deletes the specified row from the Kanban datastore.
destructor()	Clears all HTML elements of the Kanban and removes all associated event handlers.
duplicateCard()	Creates a copy of a card using its specified ID.
getAreaCards()	Retrieves an array containing data objects for all cards within the specified column (and row, if provided).
getCard()	Retrieves the data object of a card using its specified ID
getColumnCards()	Retrieves an array containing data objects for all cards within a specified column
getSelection()	Retrieves an array containing the ID(s) of the currently selected card(s).
moveCard()	Moves a card to a specified column (and row)
moveColumn()	Shifts a column to a new spot on the board.
moveRow()	Shifts a row to a new position
parse()	Loads data into the Kanban board
redo()	Reapplies the action that was undone by the undo command
scroll()	Moves the Kanban view to bring the specified element into focus.
selectCard()	Highlights a card using the given ID.
serialize()	Converts the Kanban data into a JSON format
setConfig()	Updates the Kanban with new configuration settings
setEdit()	Enables or disables the Kanban card editor
setLocale()	Changes the locale settings for Kanban
setSearch()	Finds cards based on the specified criteria
setSort()	Organizes cards based on the given sorting criteria
undo()	Reverts the last operation in Kanban
unselectCard()	Deselects card(s) based on their ID
updateCard()	Modifies the card data using its ID
updateColumn()	Modifies the data of a column using its ID
updateComment()	Modify a card comment by its ID
updateRow()	Modifies the data of a row by its ID

Kanban internal API

Event Bus methods

Name	Description
api.detach()	This method lets you remove or detach an event listener.
api.exec()	This method lets you trigger internal events within the Kanban board.
api.intercept()	Provides a way to capture and block internal events before they proceed.
api.on()	Provides a way to attach handlers to internal events.
api.setNext()	Enables adding an action into the Event Bus sequence

Export methods

Name	Description
export.json()	Outputs Kanban data as a JSON file

State methods

Name	Description
api.getReactiveState()	Retrieves an object containing the reactive properties of the Kanban board.
api.getState()	Retrieves an object containing the StateStore properties of the Kanban board.
api.getStores()	Retrieves an object containing the DataStore properties of the Kanban.

Kanban events

Name	Description
add-card	Triggered when a new card is added
add-column	Triggered when a new column is added
add-comment	Triggered when a new comment is added
add-link	Triggered when a new link is added
add-row	Triggered when a new row is added
add-vote	Triggered when a user casts a new vote
delete-card	This event triggers when a card is removed.
delete-column	Triggered when a column is removed
delete-comment	Triggered when a card comment is deleted
delete-link	Triggered when a link is removed
delete-row	Triggers when a row is being removed
delete-vote	Triggered when a user removes a vote from a card
drag-card	Triggered when a card is moved using drag and drop
duplicate-card	Triggered when a card is duplicated
end-drag-card	Triggered when a card stops being dragged
move-card	Triggered when a card is moved
move-column	Triggered when a column is moved
move-row	Triggered when a row is moved
redo	Triggered when an action that was undone gets repeated
scroll	Triggered when scrolling to specific elements
select-card	Triggered when a card is selected
set-edit	Triggered when the editor is toggled
set-search	Triggered when a search is performed on cards
set-sort	Triggered when cards are sorted
start-drag-card	Triggered when a card drag operation begins
undo	Triggered when the last action in Kanban is undone
unselect-card	Triggered when a card is unselected
update-card	Triggered when card data is updated
update-column	Triggered when a column's data is updated
update-comment	Triggered when a comment is updated
update-row	Triggered when a row's data is updated

Kanban properties

Name	Description
cardHeight	Optional. Sets the height of the cards.
cards	Optional. An array of objects holding the cards data
cardShape	Optional. Settings object to customize the appearance of cards
cardTemplate	Optional. Returns and applies a custom HTML template for the card.
columnKey	Optional. Specifies which column a card belongs to.
columns	Optional. An array of objects holding the columns data
columnShape	Optional. A settings object to customize the appearance of columns.
currentUser	Optional. Specifies the ID of the current user.
editor	Optional. Contains settings to customize the Kanban editor
editorShape	Optional. This is an array of objects that lets you control how the Kanban editor looks and works.
history	Optional. Turns history tracking on or off
links	Optional. This is an array of objects that holds the links data.
locale	Optional. An object defining a custom locale for Kanban
readonly	Optional. Controls whether editing, adding, selecting, and dragging cards are enabled or disabled.
renderType	Optional. Specifies the way cards are rendered.
rowKey	Optional. Specifies which row a card belongs to.
rows	Optional. An array of objects representing the rows (swimlanes) data.
rowShape	Optional. An object to customize how rows look and behave.
scrollType	Optional. Specifies the scrolling behavior type

Toolbar methods

Name	Description
destructor()	Clears all HTML elements of the Toolbar and detaches any associated events.
setConfig()	Updates the Toolbar with new configuration settings.
setLocale()	Updates the Toolbar of Kanban with a new locale

Toolbar properties

Name	Description
api	Required. An object representing the internal API of Kanban.
items	Optional. An array containing controls arranged on the Kanban Toolbar
locale	Optional. An object defining a custom locale for the Toolbar

Common settings

Name	Description
$meta	An object containing extra settings to customize Kanban methods and events

RestDataProvider API

RestDataProvider methods

Name	Description
getCards()	Retrieves a promise containing the cards data
getColumns()	Retrieves a promise containing the columns data
getLinks()	Retrieves a promise containing the links data
getRows()	Retrieves a promise containing the rows data
getUsers()	Retrieves a promise containing the users data
send()	Sends an HTTP request to the server and returns a promise, which may include data depending on the request.

RestDataProvider routes

Name	Description
GET /cards	Retrieves data for all cards and returns a JSON object containing an array of card objects.
GET /columns	Retrieves data for all columns and returns a JSON object containing an array of column data objects.
GET /links	Retrieves data for all links and returns a JSON object containing an array of link objects.
GET /rows	Retrieves data for all rows and returns a JSON object containing an array of row (swimlane) data objects.
GET /users	Retrieves data for all users and returns a JSON object containing an array of user objects.
GET /uploads	Retrieves the specified binary file from the server
POST /cards	Adds a new card and responds with a json object containing the new card ID
POST /cards/{cardId}/comments	Adds one or more new comments to a card and returns a JSON object containing the ID of the newly added comment.
POST /cards/{cardId}/vote	Adds a vote to the specified card and returns a JSON object containing the ID of the user who voted.
POST /columns	Creates a new column and returns a JSON object containing the column id.
POST /links	Adds a new link and returns a JSON object containing the newly created link ID.
POST /rows	Adds a new row and returns a JSON object containing the row ID.
POST /uploads	Uploads a binary file to the server and returns a json object with the file id, name, and url
PUT /cards	Updates the details of a specific card and returns an empty JSON object.
PUT /cards/{id}/move	Moves cards to a specified position
PUT /cards/{cardId}/comments/{cardId}	Updates a comment within a card and returns a JSON object containing the ID of the updated comment.
PUT /columns	Updates the details of a specified column and returns an empty JSON object.
PUT /columns/{id}/move	Moves a column to a specified position
PUT /rows	Updates the data for a specific row (swimlane) and returns an empty JSON object.
PUT /rows/{id}/move	Moves a row to a new position
DELETE /cards	Removes data from a card
DELETE /cards/{cardId}/comments/{cardId}	Deletes a comment from a card
DELETE /cards/{cardId}/vote	This endpoint removes a vote from a specified card and responds with a JSON object containing the user ID who removed the vote.
DELETE /columns	Removes a column's data
DELETE /links	Removes a link's data
DELETE /rows	Removes data from a row (swimlane)