Our flexible Kanban board for managing tasks with drag drop
how to run a custom function when the user clicks add task button in taskboard
config file code
columnToolbars: {
bottomItems: {
addTask: {
tooltip : 'Add Opportunity',
onClick: null,
}
}
}
component file code
ngAfterViewInit(): void {
this.taskboard = this.taskboardComponent.instance;
this.taskBoardConfig.features.columnToolbars.bottomItems.addTask.onClick = () => this.onAddOpportunity.bind(this);
}
onAddOpportunity() {
alert('Add Opportunity button clicked!');
// Your custom logic for adding an opportunity here
}
Hey stewart_wo,
Thanks for reaching out.
You could use the following snippet
ngAfterViewInit(): void {
this.taskBoard = this.taskBoardComponent.instance;
console.log(this.taskBoard);
this.taskBoard.addListener('click', () => {
console.log('click');
}, { delegate : 'add-task-btn' });
}
you'll need to add that class to your button like the following
columnToolbars : {
bottomItems : {
addTask : {
cls : 'add-task-btn',
tooltip : 'Add Opportunity'
}
}
}
But that's not working specifically for the add button, which is a bug, so I created a ticket to fix that and discuss a workaround with the dev team, please follow the updates here https://github.com/bryntum/support/issues/10182 .
The delete button is experiencing the same issue.
config code
columnToolbars: {
bottomItems: {
removeAll: {
icon: 'b-fa-trash removeColumn',
tooltip: 'Remove column',
cls: 'delete-task-btn',
}
}
}
component code
this.taskboard = this.taskboardComponent.instance;
this.taskboard.addListener('click', () => {
console.log('click');
}, { delegate : 'delete-task-btn' });
Expectation: click is displayed in the console
Actual result: nothing is being displayed