[ANGULAR] How to remove columns in taskboard which have items in it?

[jitendra_bryntum]

Hi,

My usecase is to delete Taskboard columns which is created dynamically at runtime on 'Add New Column' button onclick event.

We can delete these columns by below code snippet:

removeColumn() {
        if (this.taskboard.columns.count > 0) {
            this.taskboard.columns.last.remove();
            this.canRemoveColumn = this.taskboard.columns.count > 4;
        }
}

But, by this code we can remove columns from end of taskboard. We want delete button on newly created column and if user click on delete icon we can remove the respective column.

Also before removing the column we need to move the column tasks to another desired column?

How we can achieve this? kindly suggest.

[tasnim]

Hi,

Sure. Here is an example of how you could achieve it

First of all, you'd need to add an item to the column toolbar https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/ColumnToolbars

        columnToolbars   : {
            topItems : {
                removeColumn : {
                    icon : 'b-fa-trash',
                    tooltip : 'Remove this column',
                    onClick : 'up.onRemoveColumnClick'
                }
            }
        }

And here is the onclick method
https://bryntum.com/products/taskboard/docs/api/Grid/data/ColumnStore#function-remove

    onRemoveColumnClick(props) {
        console.log(props);
        const { event, source } = props;
        const id = event.target.closest('.b-taskboard-column[data-column]').dataset.column;
        const taskboard = source.up('taskboard');
        taskboard.columns.remove(id)
    },

And here the whole code

import { TaskBoard } from '../../build/taskboard.module.js?474080';
import shared from '../_shared/shared.module.js?474080';

const taskBoard = new TaskBoard({
    appendTo : 'container',

// Experimental, transition moving cards using the editor
useDomTransition : true,

features : {
    columnDrag       : true,
    columnHeaderMenu : true,
    columnToolbars   : {
        topItems : {
            removeColumn : {
                icon : 'b-fa-trash',
                tooltip : 'Remove this column',
                onClick : 'up.onRemoveColumnClick'
            }
        }
    }
},

onRemoveColumnClick(props) {
    console.log(props);
    const { event, source } = props;
    const id = event.target.closest('.b-taskboard-column[data-column]').dataset.column;
    const taskboard = source.up('taskboard');
    taskboard.columns.remove(id)
},


// Columns holding the tasks
columns : [
    // When specified as string, the string will be used as is as the columns id and capitalized as the columns text
    'todo',
    'doing',
    'review',
    // Object form, configured to show multiple tasks per row
    { id : 'done', text : 'Done', tasksPerRow : 2 }
],

// Field on task records that will be used to determine which column it should be displayed in
columnField : 'status',

// Add a text item to card footer
footerItems : {
    id : { type : 'text', editor : null }
},

tbar : [
    // Button to add a column
    {
        type    : 'button',
        text    : 'Add column',
        icon    : 'b-fa-plus-circle',
        onClick : 'up.onAddClick'
    },
    // Button to remove a column
    {
        type     : 'button',
        ref      : 'removeButton',
        text     : 'Remove column',
        icon     : 'b-fa-trash',
        onClick  : 'up.onRemoveClick',
        disabled : true
    },
    '->',
    // Field for filtering columns
    { type : 'columnfilterfield' },
    // Button for picking which columns to show
    { type : 'columnpickerbutton' }
],

// Project holding tasks, resources and assignments
project : {
    loadUrl  : 'data/data.json',
    autoLoad : true
},

// Custom task renderer, that adds prio as CSS class to the task element
taskRenderer({ taskRecord, cardConfig }) {
    if (taskRecord.prio) {
        cardConfig.class[taskRecord.prio] = true;
    }
},

// Handler for clicking the add button
onAddClick() {
    const id = taskBoard.columns.count;

    taskBoard.columns.add({ id, text : `Column #${id}` });
    taskBoard.scrollToColumn(id);

    taskBoard.widgetMap.removeButton.disabled = false;
},

// Handler for clicking the remove button
onRemoveClick() {
    taskBoard.columns.last.remove();

    taskBoard.widgetMap.removeButton.disabled = taskBoard.columns.count < 5;
}
});

And this is the result