Add item click not triggering eventListener

"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
   }

Go to https://bryntum.com/products/taskboard/examples/basic/
Add the following code to add a class to the button and a listener

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

// Url for resource avatar images
resourceImagePath : '../_shared/images/users/',

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

// Columns to display
columns : [
    { id : 'todo', text : 'Todo', color : 'orange' },
    { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
    { id : 'done', text : 'Done' }
],

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

// Project using inline data
project : {
    tasks : [
        { id : 1, name : 'Book flight', status : 'done', prio : 'medium' },
        { id : 2, name : 'Book hotel', status : 'done', prio : 'medium' },
        { id : 3, name : 'Pack bags', status : 'doing', prio : 'low' },
        { id : 4, name : 'Get visa', status : 'doing', prio : 'high' },
        { id : 5, name : 'Book train', status : 'done', prio : 'medium' },
        { id : 6, name : 'Go to airport', status : 'todo', prio : 'low' },
        { id : 7, name : 'Renew passport', status : 'todo', prio : 'high' },
        { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium' },
        { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium' },
        { id : 10, name : 'Canyoning', status : 'todo', prio : 'low' },
        { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium' },
        { id : 12, name : 'Diving license', status : 'todo', prio : 'medium' },
        { id : 13, name : 'Book cab', status : 'done', prio : 'low' },
        { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium' },
        { id : 15, name : 'Take pictures', status : 'todo', prio : 'low' },
        { id : 16, name : 'Take selfies', status : 'todo', prio : 'high' },
        { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium' },
        { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium' },
        { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high' },
        { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium' },
        { id : 21, name : 'Iron shirts', status : 'done', prio : 'low' }
    ],

    resources : [
        { id : 1, name : 'Angelo', image : 'angelo.jpg' },
        { id : 2, name : 'Celia', image : 'celia.jpg' },
        { id : 3, name : 'Dave', image : 'dave.jpg' },
        { id : 4, name : 'Emilia', image : 'emilia.jpg' },
        { id : 5, name : 'Gloria', image : 'gloria.jpg' },
        { id : 6, name : 'Henrik', image : 'henrik.jpg' },
        { id : 7, name : 'Kate', image : 'kate.jpg' },
        { id : 8, name : 'Lee', image : 'lee.jpg' },
        { id : 9, name : 'Lisa', image : 'lisa.jpg' },
        { id : 10, name : 'Mark', image : 'mark.jpg' },
        { id : 11, name : 'Steve', image : 'steve.jpg' }
    ],

    assignments : [
        { id : 1, event : 7, resource : 1 },
        { id : 2, event : 7, resource : 2 },
        { id : 3, event : 8, resource : 2 },
        { id : 4, event : 4, resource : 3 },
        { id : 5, event : 7, resource : 3 },
        { id : 6, event : 7, resource : 4 },
        { id : 7, event : 7, resource : 5 },
        { id : 8, event : 7, resource : 6 },
        { id : 9, event : 7, resource : 7 },
        { id : 10, event : 7, resource : 8 },
        { id : 11, event : 7, resource : 9 },
        { id : 12, event : 7, resource : 10 },
        { id : 13, event : 7, resource : 11 },
        { id : 14, event : 16, resource : 7 },
        { id : 15, event : 16, resource : 8 },
        { id : 16, event : 16, resource : 9 },
        { id : 17, event : 16, resource : 10 },
        { id : 18, event : 16, resource : 11 },
        { id : 19, event : 19, resource : 10 },
        { id : 20, event : 9, resource : 7 },
        { id : 21, event : 12, resource : 8 },
        { id : 22, event : 14, resource : 9 },
        { id : 23, event : 17, resource : 10 },
        { id : 24, event : 18, resource : 10 },
        { id : 25, event : 11, resource : 9 },
        { id : 26, event : 20, resource : 8 },
        { id : 27, event : 1, resource : 7 },
        { id : 28, event : 2, resource : 6 },
        { id : 29, event : 5, resource : 5 },
        { id : 30, event : 6, resource : 4 },
        { id : 31, event : 10, resource : 3 },
        { id : 32, event : 15, resource : 2 },
        { id : 33, event : 3, resource : 1 },
        { id : 34, event : 13, resource : 2 },
        { id : 36, event : 8, resource : 3 },
        { id : 37, event : 17, resource : 9 },
        { id : 38, event : 17, resource : 8 },
        { id : 39, event : 17, resource : 7 },
        { id : 40, event : 17, resource : 6 }
    ]
},
features: {
    columnToolbars: {
        bottomItems: {
            addTask: {
                cls: 'add-task-button',
                tooltip : 'Add Opportunity',
                onClick: null,
            }
        }
    }  
}

});

EventHelper.addListener(taskBoard.element, 'click', () => { console.log('click'); }, { delegate: '.add-task-button' });



Expectation: click is displayed in the console
Actual result: nothing is being displayed

Also, if you remove the `delegate` flag and listen to all the clicks, it'll show the console.log on every place you click except the add task button.

bryntum / support

Add item click not triggering eventListener #10182