# Kanban

(part of package '[kanban](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/kanban)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A Servoy Extra Component for a Kanban Board.\
Displays boards with items that can be dragged, dropped, and managed.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### boards

An array of board items to be displayed. Type: [Array\<CustomType\<svykanban-board.boardItem>>](#boarditem)

***

### dragBoards

Flag indicating whether boards can be dragged. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

***

### dragItems

Flag indicating whether items can be dragged between boards. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

***

### gutter

The gutter between boards. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### itemAddOptions

Options for adding items to a board. Type: [CustomType\<svykanban-board.itemAddOptions>](#itemaddoptions)

***

### itemHandleOptions

Options for handling item drag operations. Type: [CustomType\<svykanban-board.itemHandleOptions>](#itemhandleoptions)

***

### responsivePercentage

If true, board widths are set as a percentage of the container. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### widthBoard

The width of each board. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

## Events

### buttonClick(el,boardId,event)

Callback when the board's button is clicked

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} el The DOM element of the clicked button.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} boardId The identifier of the board.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the click.

***

### click(taskID,event)

Callback when any board's item are clicked

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} taskID The ID of the clicked task.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the click.

***

### dragBoard(el,source)

Callback when any board stop drag

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} el The DOM element representing the board.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} source The source board object.

***

### dragEl(el,source)

Callback when any board's item are clicked

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} el The DOM element of the dragged item.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} source The source board object.

***

### dragendBoard(el)

Callback when any board stop drag

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} el The DOM element representing the board.

***

### dragendEl(el)

Callback when any board's item stop drag

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} el The DOM element of the dragged item.

***

### dropEl(el,target,source,sibling)

Callback when any board's item drop in a board

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} el The identifier of the dropped item.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} target The target board object.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} source The source board object.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} sibling The sibling item element adjacent to the drop location.

***

## API

### addBoards(boardItems)

Adds all the boards to be displayed by the component, any previous boards will be replaced by the new ones

**Parameters:**

> * {[Array\<CustomType\<svykanban-board.boardItem>>](#boarditem)} boardItems An array of board items to be displayed, replacing any existing boards.

***

### addElement(boardID,element,position)

Adds an item to a specific Board

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} boardID The Board Id, if not found the item will be ignored
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} element The item to be added to the Board
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} \[position] The position to insert the new item at, if not provided it will be inserted at the end

***

### getElementIndex(elementID)

Gets the index position of an element within its parent board

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} elementID The element Id

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The zero-based index of the element in its parent board, or -1 if parent or element not found

***

### updateElement(elementID,element)

Updates the title of an existing item

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} elementID The Board Id, if not found the item will be ignored
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} element The item to be updated, the title of the existing item will be replaced with this one, if not found by id it will be ignored

***

## Types

## boardItem

Represents a board item. scripting type: CustomType\<svykanban-board.boardItem>

* class
  * CSS style class applied to the board.
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
* dragTo
  * Array of board IDs to which items can be dragged.
  * **Type**: [string\[\]](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* id
  * Unique identifier for the board.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* item
  * Array of item objects contained in the board.
  * **Type**: [item\[\]](#item)
* tabindex
  * Tab order index for keyboard navigation.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* title
  * Title of the board.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

## item

Represents an individual item in a board. scripting type: CustomType\<svykanban-board.item>

* class
  * CSS style class applied to the item.
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
* id
  * Unique identifier for the item.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* priority
  * Priority level of the item.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* title
  * Title of the item.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

## itemAddOptions

Options for adding new items to a board. scripting type: CustomType\<svykanban-board.itemAddOptions>

* class
  * CSS class for styling the add item button.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* content
  * The content to display as the add item button.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
  * **Default Value**: "+"
* enabled
  * Flag indicating whether adding items is enabled.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* footer
  * Flag indicating whether a footer is shown in the add item section.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

## itemHandleOptions

Options for item handle behavior. scripting type: CustomType\<svykanban-board.itemHandleOptions>

* customCssHandler
  * Client-side function for custom CSS styling of the handle.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* customCssIconHandler
  * Client-side function for custom CSS styling of the handle icon.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* customHandler
  * Client-side function for handling custom events on the handle.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* enabled
  * Flag indicating whether the handle is enabled.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* handleClass
  * CSS class applied to the handle.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***