Premium support for our pure JavaScript UI components


Post by chrisb »

Hey Guys,

I couldn't find a way to prevent the default delete logic, the beforeEventDelete listener didn't seem to work, and I couldn't stop the task editor delete button from showing the default confirm popup if I returned false from beforeEventDelete.

In saying that, by overriding the onItem on the delete item in the context menu, and adding my own delete button to the bbar on the task editor, I have the functionality I need.

Deleting from the context menu works fine

items.deleteTask.onItem = () => {
     this.ganttTaskEditService.deleteTask(taskRecord, taskRecord.stores[0], null);
};

The delete button on the task editor shows my custom pop-up, but the task doesn't delete, and if it does, the delete doesn't send a request to the server

deleteConfirmButton.on('click', () => {
      this.deleteTask(task, gantt.taskStore, editor);
    }, this);

And the code for deleteTask() is:

deleteTask(task: GanttTask, taskStore: Store, editor?: TaskEditor) {
    let message = 'Are you sure you want to delete this task';
    if (task.children?.length) {
      message = `This task has ${task.children.length} children.<br />
      ${message} and it's children`;
    }
    this.alertService.confirm(
      'Delete Task',
      `${message}?`,
      'Delete Task',
      'danger'
    ).subscribe((confirm) => {
      if (confirm) {
        taskStore.remove(task);
        editor?.close();
      }
    });
  }

What am I doing wrong?

Thanks
Chris


Post by saki »

beforeEventDelete is only fired after you confirm deletion in task editor. When the context menu is used it is not fired. If you want to intercept the delete process the best place is beforeRemove event on task store. The following code disables removing tasks completely:

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    taskStore : {
        listeners : {
            beforeRemove() {
                return false;
            }
        }
    }
});

Post by pmiklashevich »

To disable default delete confirmation please set confirmDelete to false.
Here is how you can implement custom delete confirmation dialog for the TaskEditor. Note, Gantt/feature/TaskEdit#function-delete is private. Here is a ticket to support custom delete confirmation out of the box:
https://github.com/bryntum/support/issues/2879

const gantt = new Gantt({
    features : {
        taskEdit : {
            // Disable default confirmation
            confirmDelete : false
        }
    },

listeners : {
    beforeTaskDelete({ editor }) {
        // Add custom confirmation dialog
        if (!editor.confirmed) {
            const autoClose = editor.autoClose;
            editor.autoClose = false;

            // Show dialog here
            MessageDialog.confirm({
                title       : 'Sure to delete?',
                message     : 'Press YES to delete!',
                rootElement : gantt.features.taskEdit.rootElement
            }).then(result => {
                editor.autoClose = autoClose;

                if (result === MessageDialog.yesButton) {
                    editor.confirmed = true;
                    // `delete` is a private function, but that is how to get back to delete operation
                    gantt.features.taskEdit.delete();
                }
            });

            return false;
        }

        delete editor.confirmed;
        return true;
    }
},

P.S. Adding confirmation dialog to the store has an issue: https://github.com/bryntum/support/issues/2878

Pavlo Miklashevych
Sr. Frontend Developer


Post by chrisb »

In regards to the issue here: https://github.com/bryntum/support/issues/2879 Ideally this would happen both from the task editor and the context menu.


Post by pmiklashevich »

Update the ticket to consider both context menu and task editor. Technically, to cover all cases just need to disable the built-in confirmation on the task editor and add on to the beforeRemove on TaskStore. But then the task editor gets broken. Opened #2878 to fix this.

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply