How to render custom confirmation dialog while updating edit operations

3 mins read

By default, for the confirmation dialog buttons of edit operations, the click event is bound in the source-level. The corresponding operations will be performed there and so this click event cannot be overridden. However, it is possible to bind click events to the dialog confirmation buttons by defining the custom toolbar items for ‘Delete’, ‘Update’ and ‘Cancel’ operations and rendering a custom dialog.

In this custom dialog, the click events are bound to the buttons and the required operations can be performed here in addition to the default edit operations for these toolbar items. This is explained in the following steps for batch editing.

First, initialize a dialog using the EJ2 Dialog Component and set the visibility as false using its visible property.

// Initialize Dialog component
let dialog = new Dialog({
        // Enables modal dialog
        isModal: true,
        // Dialog content
        content: "This is a modal dialog",
        // The Dialog shows within the target element
        target: document.getElementById("dialog-target"),
        // Dialog width
        width: "300px",
        visible: false
 });
 // Render initialized Dialog
 dialog.appendTo("#dialog");

Define the grid toolbar with custom toolbar items for ‘Delete’, ‘Update’ and ‘Cancel’ and disable the showConfirmDialog property in the grid’s editSettings.

let grid: Grid = new Grid({
               .
               .
        editSettings: {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
            showConfirmDialog: false,
            mode: "Batch"
        },
        toolbar: [
            "Add",
            "Edit",
            {
                text: "Delete",
                tooltipText: "Delete",
                prefixIcon: "e-delete",
                id: "delete"
            },
            {
                text: "Update",
                tooltipText: "Update",
                prefixIcon: "e-update",
                id: "update"
            },
            {
                text: "Cancel",
                tooltipText: "Cancel",
                prefixIcon: "e-cancel",
                id: "cancel"
            }
        ]
});
grid.appendTo("#Grid");

Then, define two button models for the dialog buttons – One for Confirmation dialog and other for no records are selected when the delete item is clicked. Bind click events for these buttons and perform the corresponding operation (‘Delete’, ‘Update’ or ‘Cancel’) based on the selected toolbar item using the flag variables.

var buttons = [
        {
            buttonModel: {
                content: "OK",
                cssClass: "e-flat",
                isPrimary: true
            },
            click: confirmationClick.bind(this)
        },
        {
            buttonModel: {
                content: "Cancel",
                cssClass: "e-flat"
            },
            click: cancelClick.bind(this)
        }
];
 
var buttons1 = [
        {
            buttonModel: {
                content: "OK",
                cssClass: "e-flat",
                isPrimary: true
            },
            click: () => {
                dialog.hide();
            }
        }
];
 
function confirmationClick(args) {
        if (isDelete) {
            isDelete = false;
            dialog.hide();
            grid.deleteRecord();
        } else if (isUpdate) {
            isUpdate = false;
            dialog.hide();
            grid.endEdit();
        } else if (isCancel) {
            isCancel = false;
            dialog.hide();
            grid.closeEdit();
        }
}
 
function cancelClick(args) {
        dialog.hide();
}

Now, update the dialog content and buttons in the toolbar click event based on the clicked item and display the dialog using its show method.

function toolbarClick(args) {
        dialog.buttons = buttons;
        if (args.item.id == "delete") {
            if (grid.getSelectedRecords().length !== 0) {
                isDelete = true;
                dialog.content = "Do you wish to delete the selected record?";
                dialog.show();
            } else {
                dialog.content = "No record selected for deletion";
                dialog.buttons = buttons1;
                dialog.show();
            }
        } else if (args.item.id == "update") {
            isUpdate = true;
            dialog.content = "Are you sure you want to save changes?";
            dialog.show();
        } else if (args.item.id == "cancel") {
            isCancel = true;
            dialog.content = "Are you sure you want to cancel changes?";
            dialog.show();
        }
}

The dialog is hidden using its hide method when clicking the dialog buttons.

Since the Toolbar items – ‘Update’ and ‘Cancel’ only need to be active when the records are added or changed, they are disabled in the dataBound and batchCancel event and enabled if there are batch changes in the cellSaved event.

function dataBound() {
        grid.toolbarModule.toolbar.enableItems(3, false);
        grid.toolbarModule.toolbar.enableItems(4, false);
}
 
function batchCancel() {
        grid.toolbarModule.toolbar.enableItems(3, false);
        grid.toolbarModule.toolbar.enableItems(4, false);
}
 
function cellSaved(args) {
        if (
            (grid.getBatchChanges() as any).addedRecords.length !== 0 ||
            (grid.getBatchChanges() as any).changedRecords.length !== 0
        ) {
            grid.toolbarModule.toolbar.enableItems(3, true);
            grid.toolbarModule.toolbar.enableItems(4, true);
        }
}

Output

Custom confirmation dialog

You can find the samples here:

TypeScript sample

JavaScript (ES5) sample

React sample

Did you find this information helpful?

Yes

Comments (0)

How to render custom confirmation dialog while updating edit operations

Output

Access denied