TaskBoardColumns

Columns hold their tasks in stores chained off the project's task store. Filters applied to the project store are by default not applied to the column stores; they are only affected by their own filters. By configuring chainFilters : true, the filters from the project store will also be taken into account when filtering the columns.

Filters on the columns' stores are applied separately, and clearing the filters on them by using clearFilters will not clear the filter(s) on the project's store.

See also chainFilters.

Field on a task record used to determine which column the task belongs to.

const taskBoard = new TaskBoard({
   columnField : 'status',

   columns : [
       'todo',
       'done'
   ],

   project : {
       tasks : [
           // Linked using the status field, to the done column
           { id : 1, name : 'Fun task', status : 'done' }
       ]
   }
});

Store containing the TaskBoard columns. A tasks columnField is matched against the id of a column to determine in which column it is displayed.

Accepts an array of column records/objects/strings, a store instance, a store id or a store config object used to create a new store.

When supplying an array, a store configured with {Core.data.mixin.StoreProxy#config-objectify} is automatically created. Using that config allows for a nicer interaction syntax with the columns:

// Without objectify:
taskBoard.columns.getById('done').text = 'Finished';

// With objectify:
taskBoard.columns.done.text = 'Finished';

When supplying strings, the raw string will be used as the columns id and a capitalized version of it is used as the columns text:

taskBoard = new TaskBoard({
   columns : [
       'doing',
       'done'
   ]
});

Is equivalent to:

taskBoard = new TaskBoard({
   columns : [
       { id : 'doing', text : 'Doing' },
       { id : 'done', text : 'Done' }
   ]
});

Columns data can be also be loaded remotely as part of the Project dataset.

Set to true to auto generate columns when columns is undefined.

A column will be created for each distinct value of columnField on the tasks. The columns will be sorted in alphabetical order. The following snippet will yield two columns, Q1 and Q2:

const taskBoard = new TaskBoard({
   columnField : 'quarter',

   autoGenerateColumns : true,

   project : {
       tasks : [
           { id : 1, name : 'Inform tenants', quarter : 'Q1' },
           { id : 2, name : 'Renovate roofs', quarter : 'Q2' }
       ]
   }
});

Field on a task record used to determine which column the task belongs to.

taskBoard.columnField = 'category';

Store containing the TaskBoard columns.