ColumnModel

Represents a single column on a TaskBoard.

When creating a TaskBoard, you can either supply an initial set of columns or have the columns be loaded remotely as part of the Project data. These columns are either defined as plain strings, ColumnModel data objects or ColumnModel records (or a mix thereof). When using strings, the string will be used as is as the column's id and capitalized as its text.

const doneColumn = new ColumnModel({
    id   : 'done',
    text : 'Done'
});

const taskBoard = new TaskBoard({
    columns : [
        // String, equal to passing { id : 'todo', text : 'Todo' }
        'todo',
        // Data object, in this case with a fixed width and not collapsible from the UI
        { id : 'doing', text : 'Doing', width : 200, collapsible : false }
        // Record, not commonly used since it is easier to supply the data object directly
        doneColumn
    ]
});

Loading Columns remotely

const taskBoard = new TaskBoard({
    // Project will load columns, tasks, resources and assignments
    project : {
        loadUrl  : 'data/data.json',
        autoLoad : true
    }
});

data.json

{
  "success" : true,
  "columns" : {
    "rows" : [
      {
        "id"   : "todo",
        "text" : "Todo"
      },
      {
        "id"          : "doing",
        "text"        : "Doing",
        "tasksPerRow" : 2
      },
      {
        "id"          : "review",
        "text"        : "Review",
        "tasksPerRow" : 2
      },
      {
        "id"          : "done",
        "text"        : "Done",
        "tasksPerRow" : 2
      }
    ]
  }
}

You can see this in action in the columns-remote demo in the examples folder.

Properties

Class hierarchy

isColumnModel: Boolean= truereadonly

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

isColumnModel: Boolean= truereadonlystatic

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

isModelModel

isModelLinkModelLink

isModelStmModelStm

isTreeNodeTreeNode

Other

tasks: TaskModel[]readonly

Get the tasks in this column in visual order.

$namestaticModel

isPersistableModel

relationsstaticModel

Editing

copyOfModel

isBatchUpdatingModel

isCommittingModel

isCreatingModel

isModifiedModel

isValidModel

modificationDataModel

modificationDataToWriteModel

modificationsModel

Fields

allFieldsstaticModel

autoExposeFieldsstaticModel

childrenFieldstaticModel

classDisplayNameModel

defaultsstaticModel

fieldMapstaticModel

fieldNamesModel

fieldsstaticModel

idFieldstaticModel

Grouping

groupChildrenModel

isGroupHeaderModel

Identification

generatedParentModel

hasGeneratedIdModel

internalIdModel

isPhantomModel

keyModel

JSON

jsonModel

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Linked records

hasLinksModelLink

isLinkedModelLink

originalRecordModelLink

recordLinksModelLink

Misc

firstStoreModel

stmModelStm

Parent & children

allChildrenTreeNode

allUnfilteredChildrenTreeNode

childLevelTreeNode

convertEmptyParentToLeafstaticTreeNode

descendantCountTreeNode

firstChildTreeNode

isLeafTreeNode

isLoadedTreeNode

isParentTreeNode

isRootTreeNode

lastChildTreeNode

nextSiblingTreeNode

parentTreeNode

parentIdTreeNode

previousSiblingTreeNode

previousSiblingsTotalCountTreeNode

visibleDescendantCountTreeNode

Functions

Expand/collapse

collapse

Collapse this column.

Uses a transition by default, await the call to be certain that it has finished.

Returns: Promise -

A promise which is resolved when the column is collapsed

expand

Expand this column.

Uses a transition by default, await the call to be certain that it has finished.

Returns: Promise -

A promise which is resolved when the column is expanded

Configuration

applyDefaultsstaticBase

Editing

beginBatchModel

cancelBatchModel

clearChangesModel

copyModel

endBatchModel

getDataModel

getUnmodifiedModel

hasBatchedChangeModel

isFieldModifiedModel

removeModel

revertChangesModel

setModel

Events

detachListenersBase

Fields

addFieldstaticModel

getModel

getDataSourceModel

getFieldDefinitionModel

processFieldstaticModel

removeFieldstaticModel

Identification

asIdstaticModel

generateIdstaticModel

JSON

toJSONModel

toStringModel

Lifecycle

constructBase

constructorModel

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

downloadTestCaseBase

equalsModel

initClassstaticBase

isOfTypeNamestaticBase

linkModelLink

mixinstaticBase

resolveCallbackBase

Other

isEditableModel

Parent & children

ancestorsExpandedTreeNode

appendChildTreeNode

bubbleTreeNode

bubbleWhileTreeNode

clearChildrenTreeNode

containsTreeNode

convertToParentTreeNode

getDescendantCountTreeNode

insertChildTreeNode

isExpandedTreeNode

removeChildTreeNode

replaceChildrenTreeNode

traverseTreeNode

traverseBeforeTreeNode

traverseWhileTreeNode

Typedefs

RelationConfigModel

Fields

collapsed: Booleanreadonly

Collapsed (true) or expanded (false)

To expand or collapse, use expand and collapse functions.

collapsible: Boolean

Allow collapsing this column

Color, named colors are applied as a b-color-{color} (for example b-color-red) CSS class to the column. Colors specified as hex, rgb() etc. are also accepted.

By default it does not visually affect the UI, but it applies a primary color (sets the --b-primary CSS variable) to the column that applications can leverage to style it in the desired way.

Using named colors:

const taskBoard = new TaskBoard({
    columns : [
        { id : 'todo', text : 'Todo', color : 'orange', tooltip : 'These are items to be done' }
    ]
});

Will result in:

<div class="b-task-board-column b-color-orange">

Which can the be used for example like:

.b-task-board-column-header {
    border-left : 5px solid var(--b-primary);
}

Using non-named colors:

const taskBoard = new TaskBoard({
    columns : [
        { id : 'todo', text : 'Todo', color : 'hsl(229deg 66% 42%)' }
    ]
});

Will result in:

<div class="b-task-board-column" style="--b-primary: hsl(229deg 66% 42%)">

Predefined named colors:

red

pink

magenta

purple

violet

deep-purple

indigo

blue

light-blue

cyan

teal

green

light-green

lime

yellow

orange

amber

deep-orange

light-gray

gray

filterable: Boolean

If 'true', a filter icon is displayed in the column header, allowing the user to do complex filter operations on the column's tasks. Requires the ColumnFilter feature to be enabled.

flex: Number

Column flex, affects width.

hidden: Boolean

Set to true to hide the column, false to show it again.

htmlEncodeHeaderText: Boolean

By default, the header text is HTML-encoded. Set this flag to false to disable this and allow html elements in the column header

id: String | Number

This column's unique id, used to match a task to a column (which field on a task to match is specified using then columnField config on TaskBoard).

locked: start | end | null

Set to 'start' or 'end' to lock the column on the inline start or end side (left or right for LTR, vice versa for RTL) of other columns, otherwise set to null to do not lock the column.

minWidth: Number

Column min-width in px. To override the default min-width specified in CSS.

searchable: Boolean

If 'true', a search field is displayed in the column header, allowing the user to quick filter the column's tasks. Requires the FilterBar feature to be enabled.

sortable: Boolean

If 'true', a sort icon is displayed in the column header, allowing the user to sort the tasks. Requires the ColumnSort feature to be enabled.

tasksPerRow: Number

Number of tasks per row to display in this column. Leave blank to use the setting from the tasksPerRow config on TaskBoard.

text: String

Text displayed in the column header.

width: Number

Column width in px.