TaskBoardDomEvents

Configs

activateTaskEvent: taskClick | taskDblClick | null= taskDblClick

The name of the event that should activate a task and trigger editing (if an editing feature is active). Available options are: 'taskClick', 'taskDblClick' or null (disable)

Properties

isTaskBoardDomEvents: Boolean= truereadonly

Identifies an object as an instance of TaskBoardDomEvents class, or subclass thereof.

isTaskBoardDomEvents: Boolean= truereadonlystatic

Identifies an object as an instance of TaskBoardDomEvents class, or subclass thereof.

Events

activateTask

Triggered when a task is "activated" by pressing Enter or double clicking it.

By default this leads to the task editor being shown.

taskBoard.on('activateTask', ({ taskRecord }) => {
   Toast.show(`Activated ${taskRecord.name}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('activateTask', ({ source, taskRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`event`	MouseEvent	Browser event

columnHeaderClick

Triggered when a column header is clicked.

taskBoard.on('columnHeaderClick', ({ columnRecord }) => {
   Toast.show(`Clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnHeaderClick', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

columnHeaderContextMenu

Triggered when a column header is right-clicked.

taskBoard.on('columnHeaderContextMenu', ({ columnRecord }) => {
   Toast.show(`Right-clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnHeaderContextMenu', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

columnHeaderDblClick

Triggered when a column header is double-clicked.

taskBoard.on('columnHeaderDblClick', ({ columnRecord }) => {
   Toast.show(`Double-clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnHeaderDblClick', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

columnTitleClick

Triggered when a column title element is clicked.

taskBoard.on('columnTitleClick', ({ columnRecord, event }) => {
   Toast.show(`Clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnTitleClick', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

columnTitleContextMenu

Triggered when a column title element is right-clicked.

taskBoard.on('columnTitleContextMenu', ({ columnRecord }) => {
   Toast.show(`Right-clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnTitleContextMenu', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

columnTitleDblClick

Triggered when a column title element is double-clicked.

taskBoard.on('columnTitleDblClick', ({ columnRecord }) => {
   Toast.show(`Double-clicked on ${columnRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('columnTitleDblClick', ({ source, columnRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

removeTaskElement

Triggered when a tasks element is removed.

This happens when a task is removed or when it is move to another swimlane / column (in which case a renderTask event is triggered for the new element).

If you used listener for renderTask to alter the element of tasks, you should also listen for this event to clean that modification up.

// Adding a listener using the "on" method
taskBoardDomEvents.on('removeTaskElement', ({ source, taskId, element }) => {

});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskId`	String \| Number	Id of the task (not the record itself since it might be removed)
`element`	HTMLElement	Tasks element

renderTask

Triggered when a task is rendered.

This happens on initial render, when a task is added or when the task element is updated.

Listening to this event allows you to manipulate the tasks element directly after it has been updated. Please note that we strongly recommend using a taskRenderer to manipulate the DomConfig used to update the task for most scenarios.

If you listen for this event and manipulate the element in some way, you should also listen for removeTaskElement and revert/clean up the changes there.

// Adding a listener using the "on" method
taskBoardDomEvents.on('renderTask', ({ source, taskRecord, isRefresh, element }) => {

});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskRecord`	TaskModel	Task being rendered
`isRefresh`	Boolean	`true` if the element was updated, `false` if it was added
`element`	HTMLElement	Tasks element

renderTasks

Triggered when all tasks in the task board are rendered

// Adding a listener using the "on" method
taskBoardDomEvents.on('renderTasks', ({ source, taskRecords }) => {

});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskRecords`	TaskModel[]	Tasks being rendered

swimlaneHeaderClick

Triggered when a swimlane header is clicked.

taskBoard.on('swimlaneHeaderClick', ({ swimlaneRecord }) => {
   Toast.show(`Clicked on ${swimlaneRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('swimlaneHeaderClick', ({ source, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

swimlaneHeaderContextMenu

Triggered when a swimlane header is right-clicked.

taskBoard.on('swimlaneHeaderContextMenu', ({ swimlaneRecord }) => {
   Toast.show(`Right-clicked on ${swimlaneRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('swimlaneHeaderContextMenu', ({ source, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

swimlaneHeaderDblClick

Triggered when a swimlane header is double-clicked.

taskBoard.on('swimlaneHeaderDblClick', ({ swimlaneRecord }) => {
   Toast.show(`Double-clicked on ${swimlaneRecord.text}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('swimlaneHeaderDblClick', ({ source, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

taskClick

Triggered when a card is clicked.

taskBoard.on('taskClick', ({ taskRecord }) => {
   Toast.show(`Clicked on ${taskRecord.name}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('taskClick', ({ source, taskRecord, columnRecord, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

taskDblClick

Triggered when a card is double-clicked

taskBoard.on('taskDblClick', ({ taskRecord }) => {
   Toast.show(`Double clicked on ${taskRecord.name}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('taskDblClick', ({ source, taskRecord, columnRecord, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

taskMouseEnter

Triggered when the mouse enters a card

taskBoard.on('taskMouseEnter', ({ taskRecord }) => {
   Toast.show(`Mouse entered ${taskRecord.name}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('taskMouseEnter', ({ source, taskRecord, columnRecord, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

taskMouseLeave

Triggered when the mouse leaves a card

taskBoard.on('taskMouseLeave', ({ taskRecord }) => {
   Toast.show(`Mouse left ${taskRecord.name}`);
});

// Adding a listener using the "on" method
taskBoardDomEvents.on('taskMouseLeave', ({ source, taskRecord, columnRecord, swimlaneRecord, event }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

Event handlers

onActivateTask

Called when a task is "activated" by pressing Enter or double clicking it.

By default this leads to the task editor being shown.

taskBoard.on('activateTask', ({ taskRecord }) => {
   Toast.show(`Activated ${taskRecord.name}`);
});

new TaskBoardDomEvents({
    onActivateTask({ source, taskRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`event`	MouseEvent	Browser event

onColumnHeaderClick

Called when a column header is clicked.

taskBoard.on('columnHeaderClick', ({ columnRecord }) => {
   Toast.show(`Clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnHeaderClick({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onColumnHeaderContextMenu

Called when a column header is right-clicked.

taskBoard.on('columnHeaderContextMenu', ({ columnRecord }) => {
   Toast.show(`Right-clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnHeaderContextMenu({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onColumnHeaderDblClick

Called when a column header is double-clicked.

taskBoard.on('columnHeaderDblClick', ({ columnRecord }) => {
   Toast.show(`Double-clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnHeaderDblClick({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onColumnTitleClick

Called when a column title element is clicked.

taskBoard.on('columnTitleClick', ({ columnRecord, event }) => {
   Toast.show(`Clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnTitleClick({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onColumnTitleContextMenu

Called when a column title element is right-clicked.

taskBoard.on('columnTitleContextMenu', ({ columnRecord }) => {
   Toast.show(`Right-clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnTitleContextMenu({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onColumnTitleDblClick

Called when a column title element is double-clicked.

taskBoard.on('columnTitleDblClick', ({ columnRecord }) => {
   Toast.show(`Double-clicked on ${columnRecord.text}`);
});

new TaskBoardDomEvents({
    onColumnTitleDblClick({ source, columnRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`event`	MouseEvent	Browser event

onRemoveTaskElement

Called when a tasks element is removed.

This happens when a task is removed or when it is move to another swimlane / column (in which case a renderTask event is called for the new element).

If you used listener for renderTask to alter the element of tasks, you should also listen for this event to clean that modification up.

new TaskBoardDomEvents({
    onRemoveTaskElement({ source, taskId, element }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskId`	String \| Number	Id of the task (not the record itself since it might be removed)
`element`	HTMLElement	Tasks element

onRenderTask

Called when a task is rendered.

This happens on initial render, when a task is added or when the task element is updated.

If you listen for this event and manipulate the element in some way, you should also listen for removeTaskElement and revert/clean up the changes there.

new TaskBoardDomEvents({
    onRenderTask({ source, taskRecord, isRefresh, element }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskRecord`	TaskModel	Task being rendered
`isRefresh`	Boolean	`true` if the element was updated, `false` if it was added
`element`	HTMLElement	Tasks element

onRenderTasks

Called when all tasks in the task board are rendered

new TaskBoardDomEvents({
    onRenderTasks({ source, taskRecords }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	TaskBoard instance
`taskRecords`	TaskModel[]	Tasks being rendered

onSwimlaneHeaderClick

Called when a swimlane header is clicked.

taskBoard.on('swimlaneHeaderClick', ({ swimlaneRecord }) => {
   Toast.show(`Clicked on ${swimlaneRecord.text}`);
});

new TaskBoardDomEvents({
    onSwimlaneHeaderClick({ source, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

onSwimlaneHeaderContextMenu

Called when a swimlane header is right-clicked.

taskBoard.on('swimlaneHeaderContextMenu', ({ swimlaneRecord }) => {
   Toast.show(`Right-clicked on ${swimlaneRecord.text}`);
});

new TaskBoardDomEvents({
    onSwimlaneHeaderContextMenu({ source, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

onSwimlaneHeaderDblClick

Called when a swimlane header is double-clicked.

taskBoard.on('swimlaneHeaderDblClick', ({ swimlaneRecord }) => {
   Toast.show(`Double-clicked on ${swimlaneRecord.text}`);
});

new TaskBoardDomEvents({
    onSwimlaneHeaderDblClick({ source, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`swimlaneRecord`	SwimlaneModel	Swimlane record
`event`	MouseEvent	Browser event

onTaskClick

Called when a card is clicked.

taskBoard.on('taskClick', ({ taskRecord }) => {
   Toast.show(`Clicked on ${taskRecord.name}`);
});

new TaskBoardDomEvents({
    onTaskClick({ source, taskRecord, columnRecord, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

onTaskDblClick

Called when a card is double-clicked

taskBoard.on('taskDblClick', ({ taskRecord }) => {
   Toast.show(`Double clicked on ${taskRecord.name}`);
});

new TaskBoardDomEvents({
    onTaskDblClick({ source, taskRecord, columnRecord, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

onTaskMouseEnter

Called when the mouse enters a card

taskBoard.on('taskMouseEnter', ({ taskRecord }) => {
   Toast.show(`Mouse entered ${taskRecord.name}`);
});

new TaskBoardDomEvents({
    onTaskMouseEnter({ source, taskRecord, columnRecord, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event

onTaskMouseLeave

Called when the mouse leaves a card

taskBoard.on('taskMouseLeave', ({ taskRecord }) => {
   Toast.show(`Mouse left ${taskRecord.name}`);
});

new TaskBoardDomEvents({
    onTaskMouseLeave({ source, taskRecord, columnRecord, swimlaneRecord, event }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`taskRecord`	TaskModel	Task record
`columnRecord`	ColumnModel	Column record for the tasks column
`swimlaneRecord`	SwimlaneModel	Swimlane record for the tasks swimlane (if used)
`event`	MouseEvent	Browser event