Skip to main content

How-tos

This page provides a full-fledged reference about initializing, configuring, customizing and working with JavaScript Kanban.

Basic principles

In this section you can find out basic principles of work with Kanban

TopicDescription
InitializationLearn how to initialize Kanban (Example)
ConfigurationLearn how to configure Kanban
CustomizationLearn how to customize Kanban
StylizationLearn how to stylize Kanban
LocalizationLearn how to localize Kanban (Example)

API reference

In this section you can find out corresponding references of Kanban API

TopicDescription
Kanban eventsLearn how to work with Kanban events
Kanban methodsLearn how to work with Kanban methods
Kanban propertiesLearn how to work with Kanban properties
Event Bus methodsLearn how to work with Event Bus methods
RestDataProvider methodsLearn how to work with RestDataProvider methods
State methodsLearn how to work with State methods
Toolbar methodsLearn how to work with Toolbar methods
Toolbar propertiesLearn how to work with Toolbar properties

How to work with cards

In these sections you can find out how to perform operations with cards, work with cards data and corfigure cards

Performing operations with cards

TopicDescription
Adding new cardsLearn how to add new cards (Example)
Deleting cardsLearn how to delete cards (Example)
Moving cardsLearn how to move cards (Example)
Scrolling to the desired cardsLearn how to scroll Kanban to the desired card
Searching for cardsLearn how to search for cards
Selecting cardsLearn how to select cards
Sorting cardsLearn how to sort cards
Unselecting cardsLearn how to unselect cards
Adding links between cardsLearn how to add links between cards (Example)

Working with card data

TopicDescription
Getting card dataLearn how to get the card data
Getting cards stateLearn how to get the cards state
Getting cards reactive stateLearn how to get the cards reactive state
Loading card dataLearn how to load the initial card data
Parsing card dataLearn how to parse the card data
Serializing card dataLearn how to serialize the card data (Example)
Updating card dataLearn how to update the card data

Configuring cards

TopicDescription
Adding new cardsLearn how to enable/disable an ability to add new cards
Binding cards into columnsLearn how to bind cards into columns
Binding cards into rowsLearn how to bind cards into rows
Configuring a card appearanceLearn how to configure a card appearance
Configuring a cards menuLearn how to configure a cards context menu (Example)
Customizing a card appearanceLearn how to customize a card appearance using templates (Example)
Dragging cardsLearn how to enable/disable an ability to drag-n-drop cards
Editing cardsLearn how to enable/disable an ability to edit cards
Lazy renderingLearn how to enable/disable lazy rendering of a big number of cards (Example)
Limiting cardsLearn how to limit cards for columns and swimlanes (WIP validation) (Example)
Selecting cardsLearn how to enable/disable an ability to select cards
Setting a fix height of cardsLearn how to set a fix height of cards
Updating card settingsLearn how to update card settings

How to work with a card editor

In this section you can find out how to work with a card editor

TopicDescription
Autosaving modeLearn how to enable/disable an editor autosave mode
Configuring editor fieldsLearn how to configure editor fields
Configuring the editorLearn how to configure the editor
Updating editor settingsLearn how to update editor settings

How to work with columns

In these sections you can find out how to perform operations with columns and work with columns data

Performing operations with columns

TopicDescription
Adding new columnsLearn how to add new columns (Example)
Configuring a columns menuLearn how to configure a columns context menu (Example)
Deleting columnsLearn how to delete columns
Moving columnsLearn how to move columns
Scrolling to the desired columnsLearn how to scroll Kanban to the desired column
Separate scrolling for columnsLearn how to set a separate scrolling for each column (Example)

Working with column data

TopicDescription
Getting card data of the columnLearn how to get the card data of the column
Getting columns stateLearn how to get the columns state
Getting columns reactive stateLearn how to get the columns reactive state
Loading column dataLearn how to load the initial column data
Parsing column dataLearn how to parse the column data
Serializing column dataLearn how to serialize the column data
Updating column dataLearn how to update the column data

How to work with rows (swimlanes)

In these sections you can find out how to perform operations with rows and work with rows data

Performing operations with rows (swimlanes)

TopicDescription
Adding new rowsLearn how to add new rows (swimlanes)
Configuring a rows menuLearn how to configure a rows (swimlanes) context menu (Example)
Deleting rowsLearn how to delete rows (swimlanes)
Moving rowsLearn how to move rows (swimlanes)
Scrolling to the desired rowLearn how to scroll Kanban to the desired row (swimlane)

Working with row (swimlane) data

TopicDescription
Getting card data of the column and rowLearn how to get the card data of the column and row
Getting rows stateLearn how to get the rows state
Getting rows reactive stateLearn how to get the rows reactive state
Loading row dataLearn how to load the initial row data
Parsing row dataLearn how to parse the row data
Serializing row dataLearn how to serialize the row data
Updating row dataLearn how to update the row data

How to work with events

TopicDescription
Executing eventsLearn how to execute the inner event
Intercepting eventsLearn how to intercept the inner event
List of inner eventsSee the list of Kanban inner events
Reordering eventsLearn how to add the inner event into the Event Bus order
Subscribing on eventsLearn how to subscribe on the inner event

How to work with Kanban REST API

TopicDescription
Loading server data for cardsLearn how to load server data for cards
Loading server data for columnsLearn how to load server data for columns
Loading server data for rowsLearn how to load server data for rows
Working with serverLearn how to work with server via REST API (Example)

How to work with Kanban state

TopicDescription
Getting StateStore and DataStoreLearn how to get StateStore and DataStore objects
Getting StateStore propertiesLearn how to get an object of the StateStore properties
Getting StateStore reactive propertiesLearn how to get an object of the StateStore reactive properties

How to work with Toolbar

TopicDescription
Configuring a searchbar on ToolbarLearn how to configure a searchbar on Toolbar (Example)
Configuring a sort control on ToolbarLearn how to configure a sort control on Toolbar (Example)
Configuring Toolbar controlsLearn how to configure, customize and reorder the Toolbar contols (Example)
Including Kanban API in ToolbarLearn how to include and use Kanban API in Toolbar
Localizing ToolbarLearn how to localize Toolbar

How to work with TypeScript

TopicDescription
Working with TypeScriptLearn how to work with TypeScript

Any questions left?

info

You can also leave your questions in the comments below!