Our flexible Kanban board for managing tasks with drag drop


Post by stewart_wo »

how to run a custom function when the user clicks add task button in taskboard
Image

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 }

Post by marcio »

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.

Best regards,
Márcio


Post by stewart_wo »

The delete button is experiencing the same issue.

Image

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


Post by ghulam.ghous »

We will check this as well as part of the above ticket. COmmented here: https://github.com/bryntum/support/issues/10182#issuecomment-2404932531. Most probably issue is going to be the same for both buttons.


Post Reply