We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render custom confirmation dialog while updating edit operations

Platform: JavaScript - EJ 2 |
Control: Grid

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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile