How-tos

Here’s a handy reference for getting started with JavaScript Kanban, including setup, configuration, customization, and everyday use.

Basic principles

This section covers the essentials for working with Kanban.

Topic	Description
Initialization	How to get Kanban up and running (Example)
Configuration	How to tweak Kanban settings
Customization	Ways to adjust Kanban to fit your needs
Stylization	Options for changing Kanban’s look and feel
Localization	How to set up Kanban for different languages (Example)

API reference

Here you’ll find links to all the main Kanban API docs.

Topic	Description
Kanban events	Details on handling Kanban events
Kanban methods	Overview of available Kanban methods
Kanban properties	Info on Kanban properties
Event Bus methods	Working with Event Bus methods
RestDataProvider methods	Using RestDataProvider methods
State methods	Managing state with State methods
Toolbar methods	Toolbar method options
Toolbar properties	Toolbar property details

How to work with cards

These sections break down how to manage cards, handle card data, and adjust card settings.

Performing operations with cards

Topic	Description
Adding new cards	Steps for adding new cards (Example)
Deleting cards	How to remove cards (Example)
Moving cards	How to move cards around (Example)
Scrolling to the desired cards	How to scroll to a specific card
Searching for cards	How to find cards quickly
Selecting cards	How to select cards
Sorting cards	How to sort cards
Unselecting cards	How to unselect cards
Adding links between cards	How to link cards together (Example)

Working with card data

Topic	Description
Getting card data	How to access card data
Getting cards state	How to check the current state of cards
Getting cards reactive state	How to get the reactive state for cards
Loading card data	How to load initial card info
Parsing card data	How to parse card data
Serializing card data	How to serialize card data (Example)
Updating card data	How to update card info

Configuring cards

Topic	Description
Adding new cards	Enable or disable adding new cards
Binding cards into columns	How to assign cards to columns
Binding cards into rows	How to assign cards to rows
Configuring a card appearance	Options for card appearance
Configuring a cards menu	How to set up a context menu for cards (Example)
Customizing a card appearance	How to use templates for card appearance (Example)
Dragging cards	Enable or disable drag-and-drop for cards
Editing cards	Enable or disable editing for cards
Lazy rendering	Enable or disable lazy rendering for lots of cards (Example)
Limiting cards	Set limits for cards in columns or swimlanes (WIP validation) (Example)
Selecting cards	Enable or disable card selection
Setting a fix height of cards	How to set a fixed card height
Updating card settings	How to update card settings

How to work with a card editor

Here’s how to use and configure the card editor.

Topic	Description
Autosaving mode	Enable or disable autosave for the editor
Configuring editor fields	How to set up editor fields
Configuring the editor	How to adjust editor settings
Updating editor settings	How to update editor settings

How to work with columns

These sections explain how to manage columns and deal with their data.

Performing operations with columns

Topic	Description
Adding new columns	How to add columns (Example)
Configuring a columns menu	How to set up a context menu for columns (Example)
Deleting columns	How to remove columns
Moving columns	How to move columns
Scrolling to the desired columns	How to scroll to a specific column
Separate scrolling for columns	How to enable separate scrolling for each column (Example)

Working with column data

Topic	Description
Getting card data of the column	How to get cards for a specific column
Getting columns state	How to check the current state of columns
Getting columns reactive state	How to get the reactive state for columns
Loading column data	How to load initial column data
Parsing column data	How to parse column data
Serializing column data	How to serialize column data
Updating column data	How to update column info

How to work with rows (swimlanes)

These sections go over row (swimlane) operations and data management.

Performing operations with rows (swimlanes)

Topic	Description
Adding new rows	How to add rows (swimlanes)
Configuring a rows menu	How to set up a context menu for rows (Example)
Deleting rows	How to remove rows (swimlanes)
Moving rows	How to move rows (swimlanes)
Scrolling to the desired row	How to scroll to a specific row (swimlane)

Working with row (swimlane) data

Topic	Description
Getting card data of the column and row	How to get cards for a specific column and row
Getting rows state	How to check the current state of rows
Getting rows reactive state	How to get the reactive state for rows
Loading row data	How to load initial row data
Parsing row data	How to parse row data
Serializing row data	How to serialize row data
Updating row data	How to update row info

How to work with events

Topic	Description
Executing events	How to trigger inner events
Intercepting events	How to intercept inner events
List of inner events	List of Kanban’s built-in events
Reordering events	How to change the order of inner events in the Event Bus
Subscribing on events	How to subscribe to inner events

How to work with Kanban REST API

Topic	Description
Loading server data for cards	How to pull card data from the server
Loading server data for columns	How to pull column data from the server
Loading server data for rows	How to pull row data from the server
Working with server	How to use the REST API with Kanban (Example)

How to work with Kanban state

Topic	Description
Getting StateStore and DataStore	How to access StateStore and DataStore objects
Getting StateStore properties	How to get StateStore property objects
Getting StateStore reactive properties	How to get StateStore’s reactive property objects

How to work with Toolbar

Topic	Description
Configuring a searchbar on Toolbar	How to add a searchbar to the Toolbar (Example)
Configuring a sort control on Toolbar	How to add a sort control to the Toolbar (Example)
Configuring Toolbar controls	How to set up, customize, and reorder Toolbar controls (Example)
Including Kanban API in Toolbar	How to use Kanban API features in the Toolbar
Localizing Toolbar	How to localize the Toolbar

How to work with TypeScript

Topic	Description
Working with TypeScript	How to use Kanban with TypeScript

Any questions left?

info

Questions can also be posted in the comments below!