TaskBoardDomEvents
Mixin

Mixin that handles dom events (click etc.) for the TaskBoard and its columns and cards.

Demo that uses taskClick and resourceAvatarClick listeners:

Snippet showing two ways to add listeners:

// Listener defined as part of config
const taskBoard = new TaskBoard({
    listeners : {
       taskClick({ taskRecord }) {
           Toast.show(`Clicked on ${taskRecord.name}`);
       }
    }
});

// Listener added at runtime
taskBoard.on('taskDblClick', ({ taskRecord }) => { ... });

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

activateTaskEvent : 'taskClick'/'taskDblClick'/nulltaskDblClick

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

Properties are getters/setters or publicly accessible variables on this class

isTaskBoardDomEvents : Booleantrue

READONLY

static

ADVANCED

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

isTaskBoardDomEvents : Booleantrue

READONLY

ADVANCED

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

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

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}`);
});
```

columnHeaderClick

Triggered when a column header is clicked.

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

columnHeaderContextMenu

Triggered when a column header is right-clicked.

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

columnHeaderDblClick

Triggered when a column header is double-clicked.

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

columnTitleClick

Triggered when a column title element is clicked.

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

columnTitleContextMenu

Triggered when a column title element is right-clicked.

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

columnTitleDblClick

Triggered when a column title element is double-clicked.

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

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.
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.
renderTasks

Triggered when all tasks in the task board are rendered

swimlaneHeaderClick

Triggered when a swimlane header is clicked.

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

swimlaneHeaderContextMenu

Triggered when a swimlane header is right-clicked.

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

swimlaneHeaderDblClick

Triggered when a swimlane header is double-clicked.

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

taskClick

Triggered when a card is clicked.

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

taskDblClick

Triggered when a card is double-clicked

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

taskMouseEnter

Triggered when the mouse enters a card

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

taskMouseLeave

Triggered when the mouse leaves a card

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

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

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}`);
});
```

onColumnHeaderClick

Called when a column header is clicked.

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

onColumnHeaderContextMenu

Called when a column header is right-clicked.

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

onColumnHeaderDblClick

Called when a column header is double-clicked.

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

onColumnTitleClick

Called when a column title element is clicked.

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

onColumnTitleContextMenu

Called when a column title element is right-clicked.

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

onColumnTitleDblClick

Called when a column title element is double-clicked.

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

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.
onRenderTask

Called 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.
onRenderTasks

Called when all tasks in the task board are rendered

onSwimlaneHeaderClick

Called when a swimlane header is clicked.

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

onSwimlaneHeaderContextMenu

Called when a swimlane header is right-clicked.

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

onSwimlaneHeaderDblClick

Called when a swimlane header is double-clicked.

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

onTaskClick

Called when a card is clicked.

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

onTaskDblClick

Called when a card is double-clicked

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

onTaskMouseEnter

Called when the mouse enters a card

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

onTaskMouseLeave

Called when the mouse leaves a card

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

Source path

TaskBoard/view/mixin/TaskBoardDomEvents.js

Inheritance tree1

TaskBoardDomEvents

TaskBoardDomEvents Mixin