Customise the Delete Confirm dialog

[Mike Sowerbutts]

The Gantt Chart's "editSettings" property can be given an object that configures deleting and a confirmation dialog to be shown when the delete button is clicked:

private editSettings: EditSettingsModel = {

        mode: "Dialog",

        allowAdding: true,

        allowEditing: true,

        allowDeleting: true,

        allowTaskbarEditing: true,

        showDeleteConfirmDialog: true,

    };

The deleting works, but the confirmation modal isn't styled and doesn't work in quite the same way as other "delete confirmation" dialogs we have in the rest of our product.

I would like to intercept the event fired from the gantt chart>toolbar>delete button click, which initially shows the built in sync fusion delete confirmation dialog, then prevent it, so I can show my own instead and handle the ok/cancel events/logic myself.

I am looking for console.logs i have written in the "actionBegin" handler and "onTaskbarClick" handler, but neither are firing for me. The only event i received is the "actionComplete" where the args.requestType = "delete", which is fired by clicking the "Ok" button in the built in sync fusion delete confirmation dialog.

How can I acheive this?

If I can't. I would like to modify the dialog styling and text to look like ours:

Thanks

Mike

[Monisha Sivanthilingam]

Hi Mike,

Greetings from Syncfusion support.

We can change the text in the Delete Confirm dialog by making use of the localization. We can also change the background color of the buttons to our required color using the CSS classes of the buttons. The below code snippets demonstrate the solution.

Index.js

 

L10n.load({

  'de-DE': {

    gantt: {

      confirmDelete: 'Are you sure you wish to remove these items?'

    },

  },

});

 

Index.html

 

<style>

  .e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]) {

    background-color: deepskyblue;

    border-color: deepskyblue;

  }

  .e-footer-content .e-btn.e-flat:not([DISABLED]) {

    background-color: white;

    border-color: white;

    color: black;

  }

</style>

 

Sample: https://stackblitz.com/edit/localization-ptckpw-jwfaqu-omjkd9?file=index.html

Online Documentation: https://ej2.syncfusion.com/react/documentation/gantt/global-local/#loading-translations

Regards,

Monisha.

[Mike Sowerbutts]

Hi,

Thanks for this information it is very much appreciated.

I assume this means there isn't a way for my to intercept the event?

Thanks

Mike

[Monisha Sivanthilingam]

Hi Mike,

Yes, we cannot customize the dialog using events. However, we can cancel the opening of the dialog and render a custom dialog of your own design using the toolbarClick event. The below code snippets demonstrate the solution.

Index.js

 

toolbarClick(args) {

  if (args.item.text == 'Delete') {

    args.cancel = true;

    console.log('Selected records:',this.ganttInstance.selectionModule.getSelectedRowIndexes());

    console.log('enter code for custom dialog here');

  }

}

 

Sample: https://stackblitz.com/edit/react-qaatre?file=index.js

Regards,

Monisha.