API overview

Kanban constructor

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

Parameters:

• the HTML container (the container's ID)
• an object containing configuration parameters (details here)

Toolbar constructor

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

Parameters:

• the HTML container (the container's ID)
• an object containing configuration settings (details here)

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 a specific card from the Kanban's datastore.
deleteColumn()	Deletes a specified column from the Kanban datastore.
deleteComment()	Remove a comment from a card using its ID
deleteLink()	Deletes the specified link from the Kanban datastore.
deleteRow()	Deletes the specified row from the Kanban datastore.
destructor()	Clears all HTML elements of the Kanban board and removes all associated event handlers.
duplicateCard()	Creates a duplicate of a card based on the given ID
getAreaCards()	Retrieves an array containing data objects for all cards within the specified column (and row).
getCard()	Retrieves the data object of a card using its specified ID
getSelection()	Retrieves an array containing the ID(s) of the selected card(s)
moveCard()	Shifts a card to a specified column (and row).
moveColumn()	Shifts a column to a new position within the board.
moveRow()	Shifts a row to a new spot within the board.
parse()	Loads data into the Kanban board
redo()	Re-executes the action that was undone by the undo method
scroll()	Moves the Kanban view to a specific element
selectCard()	Highlights a card based on the given ID.
serialize()	Converts the Kanban data into a JSON format.
setConfig()	Updates the Kanban with new configuration settings
setEdit()	Switches the Kanban card editor on or off
setLocale()	Sets a new locale for the Kanban component
setSearch()	Finds cards based on the given search criteria
setSort()	Sorts cards based on the specified criteria
setTheme()	Dynamically applies a new theme to the Kanban board (reinitializing it).
undo()	Reverts the last operation in Kanban
unselectCard()	Deselects the card(s) identified by their ID.
updateCard()	Updates a card's data by its ID
updateColumn()	Modifies the data of a column using its ID
updateComment()	Modify a card comment by specifying its ID
updateRow()	Modifies the data of a row based on its ID.

Kanban internal API

Event Bus methods

Name	Description
api.exec()	This method lets you trigger internal events within the Kanban board.
api.intercept()	Enables catching and blocking internal events before they happen.
api.on()	Enables the attachment of a handler to internal events
api.setNext()	Enables inserting a specific action into the Event Bus sequence.

Export methods

Name	Description
export.json()	Saves the 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.
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 whenever a new row is added
add-vote	Triggered whenever a user adds a new vote
delete-card	Triggered when a card is removed
delete-column	Triggers when a column is removed
delete-comment	Triggered when a card comment is deleted
delete-link	Triggered when a link is deleted
delete-row	Triggered when a row is removed
delete-vote	Triggered when a user removes a vote from a card
drag-card	This event triggers whenever a card is moved using drag-and-drop.
duplicate-card	Triggered when a card is duplicated
end-drag-card	Triggered when a card dragging action ends
move-card	Triggered when a card is moved
move-column	Triggered when a column is moved
move-row	Triggered when a row is moved
scroll	Triggered when scrolling to specified elements
select-card	Triggered when a card is selected
set-edit	Triggered when the editor is toggled
set-search	Triggered when a card search is performed
set-sort	Triggered whenever cards are sorted.
start-drag-card	Triggered when a card begins to be dragged
unselect-card	Triggered when a card is unselected
update-card	Triggered when card data is updated
update-column	Triggered whenever column data is updated.
update-comment	Triggered when a comment gets updated
update-row	Triggered when a row's data is updated

Kanban properties

Name	Description
cardHeight	Optional. Defines the height of the cards.
cards	Optional. An array of objects containing the cards data
cardShape	Optional. Settings object that controls how cards look.
cardTemplate	Optional. Generates and applies a custom HTML template for the card.
columnKey	Optional. Specifies which column a card belongs to.
columns	Optional. An array of objects containing the columns data
columnShape	Optional. Settings object to customize the look of columns
currentUser	Optional. Represents the ID of the current user
editor	Optional. Contains settings for customizing the Kanban editor
editorAutoSave	Deprecated! Optional. Enables/disables an autosave mode
editorShape	Optional. An array of objects that define the settings for controlling the look and behavior of the Kanban editor.
history	Optional. Controls whether the history of changes is tracked
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 how a card is assigned to a row.
rows	Optional. An array of objects that holds the rows (swimlanes) data
rowShape	Optional. An object with settings to customize the appearance of rows
scrollType	Optional. Specifies how scrolling behaves.
theme	Optional. Defines a theme to apply to the Kanban board

Toolbar methods

Name	Description
destructor()	Cleans up by removing all Toolbar HTML elements and detaching 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 Kanban's internal API
items	Optional. An array containing controls arranged on the Kanban Toolbar.
locale	Optional. An object that defines a custom locale for the Toolbar.
theme	Optional. Specifies the theme applied to the Toolbar.

Common settings

Name	Description
$meta	An object with 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()	This method handles sending the necessary HTTP requests to the server and returns a promise that may include data, depending on the request type.

RestDataProvider routes

Name	Description
GET /cards	Retrieves information on all cards and returns a JSON object containing an array of card objects.
GET /columns	Retrieves information about all columns and returns a JSON object containing an array of column data.
GET /links	Retrieves information about 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 card's ID.
POST /cards/{cardId}/comments	Adds one or more new comments to the specified card and returns a JSON object containing the ID of the newly added comment.
POST /cards/{cardId}/vote	Adds a new vote to the card and returns a json object with the voting user ID
POST /columns	Adds a new column and returns a JSON object with the column ID.
POST /links	Adds a new link and returns a JSON object containing the new link ID
POST /rows	Adds a new row and responds with 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 data of a specified card and returns an empty JSON object.
PUT /cards/{id}/move	Moves cards to a specified position
PUT /cards/{cardId}/comments/{cardId}	This endpoint updates an existing comment within a card and returns a JSON object containing the ID of the updated comment.
PUT /columns	Updates the details of a specific column and returns an empty JSON object.
PUT /columns/{id}/move	Changes the position of a column by moving it to a specified spot.
PUT /rows	Updates data for a specific row (swimlane) and returns an empty JSON object.
PUT /rows/{id}/move	Changes the position of a row by moving it to a specified spot.
DELETE /cards	Removes data from a card
DELETE /cards/{cardId}/comments/{cardId}	Deletes a comment from a card
DELETE /cards/{cardId}/vote	Removes a vote from a card and returns a json object with a user ID that removes a vote
DELETE /columns	Removes a column's data
DELETE /links	Removes a link entry
DELETE /rows	Removes a row (swimlane) from the data.