Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

Hi Team,

I am using the Bryntum Taskboard in React. As per my requirement, I want to show a drawer instead of a message box on firing the beforeTaskDrop listener. The drawer will contain a form, and if I click the save button on the form, then Kanban should allow it to drop in that specific column (just like the OK button in the message box), and on a cancel button click, it should not allow the task to drop.


Post by tasnim »

Hi,

You could use beforeTaskDrop listener to achieve this.
Just open the drawer in beforeTaskDrop and resolve the promise by clicking of a button

For example

const taskBoard = new TaskBoard({
   listeners : {
       async beforeTaskDrop({ taskRecords, targetColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
           });

       // Returning false will abort the drop (if user pressed Cancel)
       return result === MessageDialog.okButton;
   }
   }
});

Docs :
https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskDrag#event-beforeTaskDrop


Post Reply