Skip to main content

API overview

Kanban constructor

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


  • an HTML container (the ID of the HTML container)
  • an object of the configuration parameters (check here)

Toolbar constructor

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


  • an HTML container (the ID of the HTML container)
  • an object of the configuration parameters (check here)

Kanban methods

addCard()Adds a new card into Kanban
addColumn()Adds a new column into Kanban
addRow()Adds a new row into Kanban
deleteCard()Removes the specified card from datastore of Kanban
deleteColumn()Removes the specified column from datastore of Kanban
deleteRow()Removes the specified row from datastore of Kanban
destructor()Removes all HTML elements of the Kanban, and detaches all related events
getAreaCards()Gets an array with data objects of all cards of the specified column (and row)
getCard()Gets a data object of the card by the specified ID
getSelection()Gets an array with ID(s) of the selected card(s)
moveCard()Moves a card to the specified column (and row)
moveColumn()Moves a column to the new position
moveRow()Moves a row to the new position
parse()Parses data into Kanban
selectCard()Selects a card by the specified ID
serialize()Serializes the Kanban data to JSON
setConfig()Sets new config parameters of Kanban
setLocale()Applies new locale to Kanban
setSearch()Looks for the needed cards by the specified parameters
unselectCard()Unselects card(s) by its ID
updateCard()Updates the card data by its ID
updateColumn()Updates the column data by its ID
updateRow()Updates the row data by its ID

Kanban internal API

Event Bus methods

api.exec()Allows triggering the inner events
api.intercept()Allows intercepting and preventing the inner events
api.on()Allows attaching a handler to the inner events
api.setNext()Allows adding some action into the Event Bus order

State methods

api.getReactiveState()Gets an object with the reactive properties of the Kanban StateStore
api.getState()Gets an object with the current properties of the Kanban StateStore
api.getStores()Gets an object with the StateStore and DataStore objects of Kanban

RestDataProvider methods

getCards()Gets a promise with the cards data
getColumns()Gets a promise with the columns data
getRows()Gets a promise with the rows data

Kanban events

add-cardFires when adding a new card
add-columnFires when adding a new column
add-rowFires when adding a new row
delete-cardFires when removing a card
delete-columnFires when removing a column
delete-rowFires when removing a row
move-cardFires when moving a card
move-columnFires when moving a column
move-rowFires when moving a row
select-cardFires when selecting a card
set-searchFires when searching a card
unselect-cardFires when unselecting a card
update-cardFires when updating card data
update-columnFires when updating column data
update-rowFires when updating row data

Kanban properties

cardsOptional. An array of objects containing the cards data
cardShapeOptional. An object of settings for managing the cards appearance
cardTemplateOptional. Returns and applies a new HTML template of the card
columnKeyOptional. Defines belonging the card to the column
columnsOptional. An array of objects containing the columns data
editorAutoSaveOptional. Enables/disables an autosave mode
editorShapeOptional. An array of objects containing settings for managing the appearance and functionality of the Kanban editor
localeOptional. An object of the built-in or custom locale
readonlyOptional. Enables/disables editing, adding, selecting, dragging the cards
rowKeyOptional. Defines belonging the card to the row
rowsOptional. An array of objects containing the rows (swimlanes) data
(Toolbar) apiRequired. An object with the internal API of Kanban
(Toolbar) itemsOptional. An array of controls arranged in the toolbar of Kanban