# Kanban (part of package '[kanban](/reference/servoyextensions/packages/ui-component-packages/kanban.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) 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\>](#boarditem) *** ### dragBoards Flag indicating whether boards can be dragged. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) *** ### dragItems Flag indicating whether items can be dragged between boards. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) *** ### gutter The gutter between boards. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) *** ### itemAddOptions Options for adding items to a board. Type: [CustomType\](#itemaddoptions) *** ### itemHandleOptions Options for handling item drag operations. Type: [CustomType\](#itemhandleoptions) *** ### responsivePercentage If true, board widths are set as a percentage of the container. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false *** ### widthBoard The width of each board. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) *** ## Events ### buttonClick(el,boardId,event) Callback when the board's button is clicked **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} el The DOM element of the clicked button. > * {[String](/reference/servoycore/dev-api/js-lib/string.md)} boardId The identifier of the board. > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click. *** ### click(taskID,event) Callback when any board's item are clicked **Parameters:** > * {[String](/reference/servoycore/dev-api/js-lib/string.md)} taskID The ID of the clicked task. > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click. *** ### dragBoard(el,source) Callback when any board stop drag **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} el The DOM element representing the board. > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} source The source board object. *** ### dragEl(el,source) Callback when any board's item are clicked **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} el The DOM element of the dragged item. > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} source The source board object. *** ### dragendBoard(el) Callback when any board stop drag **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} el The DOM element representing the board. *** ### dragendEl(el) Callback when any board's item stop drag **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)} el The identifier of the dropped item. > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} target The target board object. > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} source The source board object. > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} 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\>](#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](/reference/servoycore/dev-api/js-lib/string.md)} boardID The Board Id, if not found the item will be ignored > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} element The item to be added to the Board > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} \[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](/reference/servoycore/dev-api/js-lib/string.md)} elementID The element Id **Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/js-lib/string.md)} elementID The Board Id, if not found the item will be ignored > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} 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\ * class * CSS style class applied to the board. * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * dragTo * Array of board IDs to which items can be dragged. * **Type**: [string\[\]](/reference/servoycore/dev-api/js-lib/string.md) * id * Unique identifier for the board. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * item * Array of item objects contained in the board. * **Type**: [item\[\]](#item) * tabindex * Tab order index for keyboard navigation. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * title * Title of the board. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) ## item Represents an individual item in a board. scripting type: CustomType\ * class * CSS style class applied to the item. * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * id * Unique identifier for the item. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * priority * Priority level of the item. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * title * Title of the item. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) ## itemAddOptions Options for adding new items to a board. scripting type: CustomType\ * class * CSS class for styling the add item button. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * content * The content to display as the add item button. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * **Default Value**: "+" * enabled * Flag indicating whether adding items is enabled. * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md) * **Default Value**: false * footer * Flag indicating whether a footer is shown in the add item section. * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md) ## itemHandleOptions Options for item handle behavior. scripting type: CustomType\ * customCssHandler * Client-side function for custom CSS styling of the handle. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * customCssIconHandler * Client-side function for custom CSS styling of the handle icon. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * customHandler * Client-side function for handling custom events on the handle. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * enabled * Flag indicating whether the handle is enabled. * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md) * **Default Value**: false * handleClass * CSS class applied to the handle. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/board.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.