Search results

Kanban

The Kanban board is an efficient way to visually depict various stages of a process using cards with transparent workflows. The Kanban board has rich set of APIs, methods, and events used to enable or disable its features and customize them.

<div id="kanban"></div>
<script>
  var kanbanObj = new Kanban();
  kanbanObj.appendTo("#kanban");
</script>

Properties

allowDragAndDrop

boolean

Enables or disables the drag and drop actions in Kanban.

Defaults to true

allowKeyboard

boolean

When this property is set to true, it allows the keyboard interaction in Kanban.

Defaults to true

cardHeight

string

Sets the height of the each card in the kanban. The string type includes pixel. When height is set with specific pixel value, then the card will be rendered to that specified height. In case, if auto value is set, then the height of the card gets auto-adjusted based on the content.

Defaults to ‘auto’

cardSettings

CardSettingsModel

Defines the Kanban board related settings such as header field, content field, template, show or hide header, and single or multiple selection.

Defaults to {}

columns

ColumnsModel[]

Defines the Kanban board columns and their properties such as header text, key field, template, allow toggle, expand or collapse state, min or max count, and show or hide item count.

Defaults to []

constraintType

ConstraintType

Defines the constraint type used to apply validation based on column or swimlane. The possible values are:

  • Column
  • Swimlane

Defaults to column

cssClass

string

It is used to customize the Kanban, which accepts custom CSS class names that defines specific user-defined styles and themes to be applied on the Kanban element.

Defaults to null

dataSource

Record[] | DataManager

With this property, the card data will be bound to Kanban. The card data can be passed either as an array of JavaScript objects, or else can create an instance of DataManager in case of processing remote data and can be assigned to the dataSource property. With the remote data assigned to dataSource, check the available adaptors to customize the data processing.

Defaults to []

dialogSettings

DialogSettingsModel

Defines the dialog settings such as template and fields.

Defaults to {}

enableHtmlSanitizer

boolean

Determine whether to prevent cross-site scripting code in Kanban data entry fields.

Defaults to true

enablePersistence

boolean

Enables or disables the persisting Kanban board’s state between page reloads. If enabled, columns, dataSource properties will be persisted in kanban.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableTooltip

boolean

Enables or disables the tooltip in Kanban board. The property relates to the tooltipTemplate property.

Defaults to false

enableVirtualization

boolean

When the enableVirtualization property is set to true in a Kanban, it will only render the cards that are currently visible within the viewport, and will load additional cards as the user scrolls vertically through the Kanban. This can be helpful for improving the performance of the Kanban when working with large datasets, as it reduces the number of elements that need to be rendered and managed by the browser at any given time.

Defaults to false

externalDropId

string[]

Defines the ID of drop Kanban on which drop should occur.

Defaults to []

height

string | number

Sets the height of the Kanban board, accepting both string and number values. The string type includes either pixel or percentage values. When height is set with specific pixel value, then the Kanban will be rendered to that specified space. In case, if auto value is set, then the height of the Kanban gets auto-adjusted within the given container.

Defaults to ‘auto’

keyField

string

Defines the key field of Kanban board. The Kanban renders its layout based on this key field.

Defaults to null

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

query

Query

Defines the external query that will be executed along with the data processing.

Defaults to null

showEmptyColumn

boolean

Enable or disable the columns when empty dataSource.

Defaults to false

sortSettings

SortSettingsModel

Defines the sort settings such as field and direction.

Defaults to {}

stackedHeaders

StackedHeadersModel[]

Defines the stacked header for Kanban columns with text and key fields.

Defaults to []

swimlaneSettings

SwimlaneSettingsModel

Defines the swimlane settings to Kanban board such as key field, text field, template, allow drag-and-drop, show or hide empty row, show or hide items count, and more.

Defaults to {}

tooltipTemplate

string | Function

Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.

Defaults to null

width

string | number

Sets the width of the Kanban board, accepting both string and number values. The string value can be either pixel or percentage format. When set to auto, the Kanban width gets auto-adjusted and display its content related to the viewable screen size.

Defaults to ‘auto’

Methods

addCard

Adds the new card to the data source of Kanban and layout.

Parameter Type Description
cardData Record | Record[] Accepts Single card object or Collection of card objects to be added into Kanban.
index (optional) number Accepts the index to insert the card in column.

Returns void

addColumn

Add the column to Kanban board dynamically based on the provided column options and index in the argument list.

Parameter Type Description
columnOptions ColumnsModel Accepts the properties to new column that are going to be added in the board.
index number Accepts the index of column to add the new column.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

closeDialog

To manually close the dialog.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteCard

Deletes the card based on the provided ID or card collection in the argument list.

Parameter Type Description
cardData string | number | Record | Record[] Accepts the ID of the remove card in string or number type or
Single card object or Collection of card objects to be removed from Kanban

Returns void

deleteColumn

Deletes the column based on the provided index value.

Parameter Type Description
index number Accepts the index of column to delete the existing column from Kanban board.

Returns void

destroy

Removes the control from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getCardDetails

Returns the card details based on card ID from the board.

Parameter Type Description
target Element Accepts the card element to get the details.

Returns Record

getColumnData

Returns the column data based on column key input.

Parameter Type Description
columnKey string | number Accepts the column key to get the objects.
dataSource (optional) Record[] Accepts the collection of objects to get the results based on given columnKey.

Returns Record[]

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedCards

Gets the list of selected cards from the board.

Returns HTMLElement[]

getSwimlaneData

Returns the swimlane column data based on swimlane keyField input.

Parameter Type Description
keyField string Accepts the swimlane keyField to get the objects.

Returns Record[]

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideColumn

Hides the column from Kanban board based on the provided key in the columns.

Parameter Type Description
key string | number Accepts the visible column key name to be hidden from the board.

Returns void

hideSpinner

When the spinner is shown manually using the showSpinner method, it can be hidden using this hideSpinner method.

Returns void

openDialog

To manually open the dialog.

Parameter Type Description
action CurrentAction Accepts the action for which the dialog needs to be opened such as either for new card creation or
editing of existing cards. The applicable action names are Add and Edit.
data (optional) Record It can be card data.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshHeader

Method to refresh the column header.

Returns void

refreshUI

Method to refresh the Kanban UI based on modified records.

Parameter Type Description
args ActionEventArgs Accepts the added, changed or deleted data.
index (optional) number Accepts the index of the changed items.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

showColumn

Shows the column from hidden based on the provided key in the columns.

Parameter Type Description
key string | number Accepts the hidden column key name to be shown from the hidden state in board.

Returns void

showSpinner

Allows you to show the spinner on Kanban at the required scenarios.

Returns void

updateCard

Updates the changes made in the card object by passing it as a parameter to the data source.

Parameter Type Description
cardData Record | Record[] Accepts Single card object or Collection of card objects to be updated into Kanban.
index (optional) number Accepts the index to update the card in column.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

actionBegin

EmitType<ActionEventArgs>

Triggers on beginning of every Kanban action.

actionComplete

EmitType<ActionEventArgs>

Triggers on successful completion of the Kanban actions.

actionFailure

EmitType<ActionEventArgs>

Triggers when a Kanban action gets failed or interrupted and an error information will be returned.

cardClick

EmitType<CardClickEventArgs>

Triggers on single-clicking the Kanban cards.

cardDoubleClick

EmitType<CardClickEventArgs>

Triggers on double-clicking the Kanban cards.

cardRendered

EmitType<CardRenderedEventArgs>

Triggers before each card of the Kanban rendering on the page.

created

EmitType<Record>

Triggers after the kanban board is created.

dataBinding

EmitType<ReturnType>

Triggers before the data binds to the Kanban.

dataBound

EmitType<ReturnType>

Triggers once the event data is bound to the Kanban.

dataSourceChanged

EmitType<DataSourceChangedEventArgs>

Triggers when the grid data is added, deleted and updated. Invoke the done method from the argument to start render after edit operation.

dataStateChange

EmitType<DataStateChangeEventArgs>

Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done. In this event,the current view data and total record count should be assigned to the dataSource based on the action performed.

dialogClose

EmitType<DialogEventArgs>

Triggers before the dialog closes.

dialogOpen

EmitType<DialogEventArgs>

Triggers before the dialog opens.

drag

EmitType<DragEventArgs>

Triggers when the card is dragging to other stage or other swimlane.

dragStart

EmitType<DragEventArgs>

Triggers when the card drag actions starts.

dragStop

EmitType<DragEventArgs>

Triggers when the card drag actions stops.

queryCellInfo

EmitType<QueryCellInfoEventArgs>

Triggers before each column of the Kanban rendering on the page.