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
| Topic | Description |
|---|---|
| Initialization | Learn how to initialize Kanban (Example) |
| Configuration | Learn how to configure Kanban |
| Customization | Learn how to customize Kanban |
| Stylization | Learn how to stylize Kanban |
| Localization | Learn how to localize Kanban (Example) |
API reference
In this section you can find out corresponding references of Kanban API
| Topic | Description |
|---|---|
| Kanban events | Learn how to work with Kanban events |
| Kanban methods | Learn how to work with Kanban methods |
| Kanban properties | Learn how to work with Kanban properties |
| Event Bus methods | Learn how to work with Event Bus methods |
| RestDataProvider methods | Learn how to work with RestDataProvider methods |
| State methods | Learn how to work with State methods |
| Toolbar methods | Learn how to work with Toolbar methods |
| Toolbar properties | Learn 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
| Topic | Description |
|---|---|
| Adding new cards | Learn how to add new cards (Example) |
| Deleting cards | Learn how to delete cards (Example) |
| Moving cards | Learn how to move cards (Example) |
| Scrolling to the desired cards | Learn how to scroll Kanban to the desired card |
| Searching for cards | Learn how to search for cards |
| Selecting cards | Learn how to select cards |
| Sorting cards | Learn how to sort cards |
| Unselecting cards | Learn how to unselect cards |
| Adding links between cards | Learn how to add links between cards (Example) |
Working with card data
| Topic | Description |
|---|---|
| Getting card data | Learn how to get the card data |
| Getting cards state | Learn how to get the cards state |
| Getting cards reactive state | Learn how to get the cards reactive state |
| Loading card data | Learn how to load the initial card data |
| Parsing card data | Learn how to parse the card data |
| Serializing card data | Learn how to serialize the card data (Example) |
| Updating card data | Learn how to update the card data |
Configuring cards
| Topic | Description |
|---|---|
| Adding new cards | Learn how to enable/disable an ability to add new cards |
| Binding cards into columns | Learn how to bind cards into columns |
| Binding cards into rows | Learn how to bind cards into rows |
| Configuring a card appearance | Learn how to configure a card appearance |
| Configuring a cards menu | Learn how to configure a cards context menu (Example) |
| Customizing a card appearance | Learn how to customize a card appearance using templates (Example) |
| Dragging cards | Learn how to enable/disable an ability to drag-n-drop cards |
| Editing cards | Learn how to enable/disable an ability to edit cards |
| Lazy rendering | Learn how to enable/disable lazy rendering of a big number of cards (Example) |
| Limiting cards | Learn how to limit cards for columns and swimlanes (WIP validation) (Example) |
| Selecting cards | Learn how to enable/disable an ability to select cards |
| Setting a fix height of cards | Learn how to set a fix height of cards |
| Updating card settings | Learn 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
| Topic | Description |
|---|---|
| Autosaving mode | Learn how to enable/disable an editor autosave mode |
| Configuring editor fields | Learn how to configure editor fields |
| Configuring the editor | Learn how to configure the editor |
| Updating editor settings | Learn 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
| Topic | Description |
|---|---|
| Adding new columns | Learn how to add new columns (Example) |
| Configuring a columns menu | Learn how to configure a columns context menu (Example) |
| Deleting columns | Learn how to delete columns |
| Moving columns | Learn how to move columns |
| Scrolling to the desired columns | Learn how to scroll Kanban to the desired column |
| Separate scrolling for columns | Learn how to set a separate scrolling for each column (Example) |
Working with column data
| Topic | Description |
|---|---|
| Getting card data of the column | Learn how to get the card data of the column |
| Getting columns state | Learn how to get the columns state |
| Getting columns reactive state | Learn how to get the columns reactive state |
| Loading column data | Learn how to load the initial column data |
| Parsing column data | Learn how to parse the column data |
| Serializing column data | Learn how to serialize the column data |
| Updating column data | Learn 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)
| Topic | Description |
|---|---|
| Adding new rows | Learn how to add new rows (swimlanes) |
| Configuring a rows menu | Learn how to configure a rows (swimlanes) context menu (Example) |
| Deleting rows | Learn how to delete rows (swimlanes) |
| Moving rows | Learn how to move rows (swimlanes) |
| Scrolling to the desired row | Learn how to scroll Kanban to the desired row (swimlane) |
Working with row (swimlane) data
| Topic | Description |
|---|---|
| Getting card data of the column and row | Learn how to get the card data of the column and row |
| Getting rows state | Learn how to get the rows state |
| Getting rows reactive state | Learn how to get the rows reactive state |
| Loading row data | Learn how to load the initial row data |
| Parsing row data | Learn how to parse the row data |
| Serializing row data | Learn how to serialize the row data |
| Updating row data | Learn how to update the row data |
How to work with events
| Topic | Description |
|---|---|
| Executing events | Learn how to execute the inner event |
| Intercepting events | Learn how to intercept the inner event |
| List of inner events | See the list of Kanban inner events |
| Reordering events | Learn how to add the inner event into the Event Bus order |
| Subscribing on events | Learn how to subscribe on the inner event |
How to work with Kanban REST API
| Topic | Description |
|---|---|
| Loading server data for cards | Learn how to load server data for cards |
| Loading server data for columns | Learn how to load server data for columns |
| Loading server data for rows | Learn how to load server data for rows |
| Working with server | Learn how to work with server via REST API (Example) |
How to work with Kanban state
| Topic | Description |
|---|---|
| Getting StateStore and DataStore | Learn how to get StateStore and DataStore objects |
| Getting StateStore properties | Learn how to get an object of the StateStore properties |
| Getting StateStore reactive properties | Learn how to get an object of the StateStore reactive properties |
How to work with Toolbar
| Topic | Description |
|---|---|
| Configuring a searchbar on Toolbar | Learn how to configure a searchbar on Toolbar (Example) |
| Configuring a sort control on Toolbar | Learn how to configure a sort control on Toolbar (Example) |
| Configuring Toolbar controls | Learn how to configure, customize and reorder the Toolbar contols (Example) |
| Including Kanban API in Toolbar | Learn how to include and use Kanban API in Toolbar |
| Localizing Toolbar | Learn how to localize Toolbar |
How to work with TypeScript
| Topic | Description |
|---|---|
| Working with TypeScript | Learn how to work with TypeScript |
Any questions left?
info
You can also leave your questions in the comments below!