SimpleTaskEdit

This feature allows inline editing of tasks. Double-clicking an item starts editing it:

Simple task edit

//<code-header>
fiddle.title = 'Simple task edit';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        simpleTaskEdit : true
    },

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click here', status : 'doing', description : 'Or do it here', tags : 'and,here' }
        ]
    }
});

Each task item can define an editor. To prevent an item from being edited inline, configure it with editor : null:

Simple task edit custom

//<code-header>
fiddle.title = 'Simple task edit custom';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskEdit       : false,
        simpleTaskEdit : true
    },

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    bodyItems : {
        // Disable editing the description
        text : { editor : null }
    },

    footerItems : {
        // Custom editor for the prio item
        prio : { type : 'text', editor : { type : 'combo', items : ['Low prio', 'High prio'] } }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Can edit title', status : 'doing', description : 'Cant edit description', prio : 'Low prio' }
        ]
    }
});

This feature is disabled by default.

Keyboard shortcuts

The feature has the following default keyboard shortcuts:

Keys	Action	Action description
`Enter`	editNext	In an editor this will accept the change and start editing the next item on that card or the first item on the next card. By default it adds a new task when pressed on the last item of the last card in a column. This behaviour is configurable using the addNewAtEnd config.
`Escape`	cancel	Cancels editing and reverts changes for that item which is currently being edited
`Shift`+`Enter`	editPrevious	In an editor this will accept the change and start editing the previous item on that card or the last item on the previous card
`Ctrl`+`Enter`	complete	Accepts the edit and closes the editor

Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

addNewAtEnd: Boolean= true

Pressing Enter in last item on last task in a column adds a new task.

editorConfig: EditorConfig

A configuration object for the Editor used by this feature. Useful when you want to validate the value being set by the end user (see beforeComplete).

keyMap: Object<String, KeyMapConfig>

See Keyboard shortcuts for details

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isSimpleTaskEdit: Boolean= truereadonly

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

isSimpleTaskEdit: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

Other

editTask

Starts inline editing of the supplied task, optionally for a specific item on its card.

Parameter	Type	Description
`taskRecord`	TaskModel	Task record to edit
`element`	HTMLElement	Card element or card item element to edit. Resolves element from the passed record if left out.

Returns: Boolean -

Returns true if editing started, false if it did not.

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

beforeSimpleTaskEdit

Fires on the owning TaskBoard before displaying an inline editor. Returning false stops the editor from being shown.

const taskBoard = new TaskBoard({
   listeners : {
       beforeSimpleTaskEdit({ taskRecord }) {
           // Some condition for which editing should be blocked...
           if (taskRecord.disallowed) {
               return false;
           }
       }
   }
});

// Adding a listener using the "on" method
simpleTaskEdit.on('beforeSimpleTaskEdit', ({ source, simpleTaskEdit, taskRecord, field }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	The record about to be shown in the editor
`field`	String	Field name being edited

simpleTaskEditCancel

Fires on the owning TaskBoard when inline editing of a field is cancelled (by pressing ESC).

const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditCancel({ taskRecord }) {
           Toast.show(`Aborted editing of ${taskRecord.name}`);
       }
   }
});

// Adding a listener using the "on" method
simpleTaskEdit.on('simpleTaskEditCancel', ({ source, simpleTaskEdit, taskRecord, field }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	Record that was edited
`field`	String	Field name being edited

simpleTaskEditComplete

Fires on the owning TaskBoard when inline editing of a field has successfully finished.

const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditComplete({ taskRecord, field }) {
           Toast.show(`Finished editing ${field} of ${taskRecord.name}`);
       }
   }
});

// Adding a listener using the "on" method
simpleTaskEdit.on('simpleTaskEditComplete', ({ source, simpleTaskEdit, taskRecord, field }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	Record that was edited
`field`	String	Field name being edited

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeSimpleTaskEdit

Called on the owning TaskBoard before displaying an inline editor. Returning false stops the editor from being shown.

const taskBoard = new TaskBoard({
   listeners : {
       beforeSimpleTaskEdit({ taskRecord }) {
           // Some condition for which editing should be blocked...
           if (taskRecord.disallowed) {
               return false;
           }
       }
   }
});

new SimpleTaskEdit({
    onBeforeSimpleTaskEdit({ source, simpleTaskEdit, taskRecord, field }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	The record about to be shown in the editor
`field`	String	Field name being edited

onSimpleTaskEditCancel

Called on the owning TaskBoard when inline editing of a field is cancelled (by pressing ESC).

const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditCancel({ taskRecord }) {
           Toast.show(`Aborted editing of ${taskRecord.name}`);
       }
   }
});

new SimpleTaskEdit({
    onSimpleTaskEditCancel({ source, simpleTaskEdit, taskRecord, field }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	Record that was edited
`field`	String	Field name being edited

onSimpleTaskEditComplete

Called on the owning TaskBoard when inline editing of a field has successfully finished.

const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditComplete({ taskRecord, field }) {
           Toast.show(`Finished editing ${field} of ${taskRecord.name}`);
       }
   }
});

new SimpleTaskEdit({
    onSimpleTaskEditComplete({ source, simpleTaskEdit, taskRecord, field }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The task board
`simpleTaskEdit`	SimpleTaskEdit	The simpleTaskEdit feature
`taskRecord`	TaskModel	Record that was edited
`field`	String	Field name being edited

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-task-board-simple-task-edit-background`	Editor background
`--b-task-board-simple-task-edit-border`	Editor border
`--b-task-board-simple-task-edit-box-shadow`	Editor box shadow

SimpleTaskEdit

Keyboard shortcuts

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Other

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs

CSS variables