How-tos

This page is a complete reference for getting started, setting up, tweaking, and managing JavaScript Kanban.

Basic principles

Here are the main things to know when working with Kanban.

Topic	Description
Initialization	How to set up Kanban (Example)
Configuration	Ways to configure Kanban
Customization	Steps to customize Kanban
Stylization	Options for styling Kanban
Localization	How to localize Kanban (Example)

API reference

Here are the Kanban API references you might need.

Topic	Description
Kanban events	Working with Kanban events
Kanban methods	Using Kanban methods
Kanban properties	Accessing Kanban properties
Event Bus methods	Event Bus methods
RestDataProvider methods	RestDataProvider methods
State methods	State methods
Toolbar methods	Toolbar methods
Toolbar properties	Toolbar properties

How to work with cards

These sections cover how to manage cards, handle card data, and set up cards just how you want.

Performing operations with cards

Topic	Description
Adding new cards	How to add new cards (Example)
Deleting cards	How to delete cards (Example)
Moving cards	How to move cards (Example)
Scrolling to the desired cards	How to scroll Kanban to a specific card
Searching for cards	How to search for cards
Selecting cards	How to select cards
Sorting cards	How to sort cards
Unselecting cards	How to unselect cards
Adding links between cards	How to add links between cards (Example)

Working with card data

Topic	Description
Getting card data	How to get card data
Getting cards state	How to get card state
Getting cards reactive state	How to get card reactive state
Loading card data	How to load initial card data
Parsing card data	How to parse card data
Serializing card data	How to serialize card data (Example)
Updating card data	How to update card data

Configuring cards

Topic	Description
Adding new cards	Turning on or off the option to add new cards
Binding cards into columns	How to link cards to columns
Binding cards into rows	How to link cards to rows
Configuring a card appearance	How to set up how a card looks
Configuring a cards menu	How to set up the cards context menu (Example)
Customizing a card appearance	How to use templates to change card appearance (Example)
Dragging cards	Turning on or off drag-n-drop for cards
Editing cards	Turning on or off editing for cards
Lazy rendering	Turning on or off lazy rendering for many cards (Example)
Limiting cards	Setting limits for columns and swimlanes (WIP validation) (Example)
Selecting cards	Turning on or off card selection
Setting a fix height of cards	How to set a fixed height for cards
Updating card settings	How to update card settings

How to work with a card editor

Check here for details on using the card editor.

Topic	Description
Autosaving mode	How to turn editor autosave on or off
Configuring editor fields	How to set up editor fields
Configuring the editor	How to set up the editor
Updating editor settings	How to update editor settings

How to work with columns

Here's how to manage columns and handle column data.

Performing operations with columns

Topic	Description
Adding new columns	How to add new columns (Example)
Configuring a columns menu	How to set up the columns context menu (Example)
Deleting columns	How to delete columns
Moving columns	How to move columns
Scrolling to the desired columns	How to scroll Kanban to a specific column
Separate scrolling for columns	How to give each column its own scrolling (Example)

Working with column data

Topic	Description
Getting card data of the column	How to get card data for a column
Getting columns state	How to get column state
Getting columns reactive state	How to get column reactive state
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 data

How to work with rows (swimlanes)

These sections show how to manage rows (swimlanes) and handle their data.

Performing operations with rows (swimlanes)

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

Working with row (swimlane) data

Topic	Description
Getting card data of the column and row	How to get card data for a column and row
Getting rows state	How to get row state
Getting rows reactive state	How to get row reactive state
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 data

How to work with events

Topic	Description
Executing events	Running an inner event
Intercepting events	How to intercept an inner event
List of inner events	Kanban inner events list
Reordering events	How to change Event Bus order for an inner event
Subscribing on events	How to subscribe to an inner event

How to work with Kanban REST API

Topic	Description
Loading server data for cards	How to load card data from the server
Loading server data for columns	How to load column data from the server
Loading server data for rows	How to load row data from the server
Working with server	How to work with the server via REST API (Example)

How to work with Kanban state

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

How to work with Toolbar

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

How to work with TypeScript

Topic	Description
Working with TypeScript	How to use TypeScript with Kanban

Any questions left?

info

Questions can also go in the comments below!