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 |
Deprecated! | |
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. |