ColumnCombo

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            editorConfig : {
                modal       : false,
                centered    : false,
                constrainTo : targetElement
            },

            items : {
                description : null,
                resources   : null,
                color       : null
            }
        }
    },

    // Swimlanes to display
    swimlanes : [
        { id : 'high', text : 'High', color : 'red' },
        { id : 'medium', text : 'Medium', color : 'yellow' },
        { id : 'low', text : 'Low', color : 'green' }
    ],

    // Field used to pair a task to a swimlane
    swimlaneField : 'prio',

    // Columns to display
    columns : [
        { id : 'todo', text : 'Todo', color : 'orange' },
        { id : 'doing', text : 'Doing', color : 'blue' },
        { id : 'done', text : 'Done', color : 'green' }
    ],

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

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Task 1', status : 'doing', prio : 'low' },
            { id : 2, name : 'Task 2', status : 'done', prio : 'medium' },
            { id : 3, name : 'Task 3', status : 'done', prio : 'high' },
            { id : 4, name : 'Task 4', status : 'todo', prio : 'low' },
            { id : 5, name : 'Task 5', status : 'todo', prio : 'medium' }
        ]
    },

    listeners : {
        initialCompose() {
            taskBoard.editTask(taskBoard.project.taskStore.first);
        }
    }
});