How can I replace task editor.

[tmcuong]

How can I replace task editor.
I do as calendar but taskboard is not raise event when I click

 <bryntum-task-board   

                #taskboard                                             

                [features]="taskBoardConfig.features"                                            

                [columns]="taskBoardConfig.columns"
                (onCellClick) = "onTaskBoardCellClick($event)"
                tooltip = "My cool Bryntum TaskBoard component"
                (onDataChange) = "syncData($event)"
                (onCatchAll) = "onTaskBoardEvents($event)"               

            ></bryntum-task-board>

this.taskBoardConfig = {         

      useDomTransition : true,      

      features : {
          columnToolbars : true,
          columnHeaderMenu : true,
          taskEdit       : {
            items : {
              category : {
                  type   : 'combo',
                  items  : [ 'Administrative', 'DevOps', 'Devs' ],
                  name   : 'category',
                  label  : 'Category',
                  weight : 150
              }
            }
          }
      },
  

  headerItems : {
      resourceAvatars : { type : 'resourceAvatars' }
  },     
  footerItems : {
      resourceAvatars : null
  },
  columns : [
      'todo',
      'doing',
      'done'
  ],
  
  // Field used to pair a task to a column
  columnField : 'status',
  
  // bodyItems : {
  //     tags : { type : 'tags'  }
  // },
  
  // Project using inline data
  project : {
      tasksData : [
          { id : 1, name : 'Task 1', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' },
          { id : 2, name : 'Task 2', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' },
          { id : 3, name : 'Task 3', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' },
          { id : 4, name : 'Task 4', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
      ],
  
      resourcesData : [
          { id : 1, name : 'Angelo', image : 'angelo.jpg' },
          { id : 2, name : 'Celia', image : 'celia.jpg' },
          { id : 3, name : 'Dave', image : 'dave.jpg' }
      ],
  
      assignmentsData : [
          { id : 1, event : 1, resource : 1 }
      ]
  },
  listeners : {
      cellClick(e) {
          alert('cellClick');
          console.log('cellClick', e);
      }
    }
  }
  
ngAfterViewInit(): void {
     this.taskboard = this.taskboardComponent.instance;        

     this.taskboard.setConfig(this.taskBoardConfig);      

     this.taskboard.on('beforeEventEdit', this.beforeEventEdit.bind(this));
  }
    onTaskBoardCellClick(e) : void {   

      alert(1);
      console.log('onCellClick', e);
  }

  beforeEventEdit({ editor, eventRecord }): boolean {
     alert(1);
     return false;
  }  
  

  onTaskBoardEvents(event: Record<string, any>): void {
   

// Uncomment the code in this method to start "logging" events
switch (event.type) {
  case 'beforeEventEdit':  
    break;
  case 'daterangechange':
    break;
  case 'aftereventsave':
    break;
  case 'beforeeventdelete':
    console.log(event.eventRecords);
    console.log(`Events removed: ${event.eventRecords.map(eventRecord => eventRecord.name).join(',')}`);
    this.taskService.deleteTask(event.eventRecords.id).subscribe(item => {
     
    });
    break;
  default:
    break;  
}
  }

[alex.l]

We don't yet have such event for TaskBoard, but we have a ticket to add this: https://github.com/bryntum/support/issues/3714

Try to use https://www.bryntum.com/docs/taskboard/api/TaskBoard/feature/TaskEdit#config-processItems and return false from it.

[tmcuong]

I used this code it works

 // close dialog and save back to taskBoard
 SaveData(modal) {   

    this.editingRecord.taskRecord.set({
      name: 'hello',
      description: 'description'    

    });
    modal.dismiss();
  }
  

beforeEventEdit(editor): boolean {   

     this.editingRecord = editor;
     this.openDialog(this.contentPopup);
     return false;
  }  
   


ngAfterViewInit(): void {
     this.taskboard = this.taskboardComponent.instance;        

     this.taskboard.setConfig(this.taskBoardConfig);      

     this.taskboard.on('taskClick', this.beforeEventEdit.bind(this)); 
  }

Thanks

[saki]

We are glad that you have found the solution. Continue to ask please if there is anything we can help you with.