1. Home
  2. Forum
  3. React - EJ 2
  4. How to customize delete confirmation window in React?

How to customize delete confirmation window in React?

Hi, 

Is there any way I can customize delete confirmation window? I've seen some answers ASP.NET forum, but I'm not sure if it works in React too.


3 Replies
BS Balaji Sekar Syncfusion Team February 24, 2020 04:22 AM UTC

 
Greetings from the Syncfusion support, 
 
In the dialog buttons click event we have performed the required operations in source-level, so overriding this click event would not be advisable. However you can achieve your requirement by defining custom toolbar items for ‘Delete’ operations and render a custom dialog to perform these functions by handling its click events. This is explained below, 
 
First initialize a dialog using the EJ2 Dialog Component and set its visibility as false. 
 
import { DialogComponent } from "@syncfusion/ej2-react-popups"; 
 
render() { 
    return ( 
      <div className="control-pane"> 
        <div className="control-section"> 
          <div className="col-md-9" id="dialog-target"> 
                          . 
                          . 
            <DialogComponent width="300px" target="#dialog-target" visible={false} isModal={true} ref={dialog => (this.dialogInstance = dialog)} /> 
          </div> 
        </div> 
      </div> 
    ); 
} 
 
Define the grid toolbar with custom toolbar items for ‘Delete’. 
 
constructor() { 
           . 
           . 
  this.toolbarOptions = [ 
    "Add", 
    "Edit", 
    { 
      text: "Delete", 
      tooltipText: "Delete", 
      prefixIcon: "e-delete", 
      id: "delete" 
    }, 
    “Update” 
     . . . .  
  ]; 
 
  this.editSettings = { 
    allowEditing: true, 
    allowAdding: true, 
    allowDeleting: true . .  
  }; 
} 
 
Then define two button models for the dialog buttons – One for Confirmation dialog and one for when no records are selected when the delete item is clicked. Bind click events for these buttons and perform the required operation based on the selected toolbar item using flag variables.  
 
constructor() { 
          . 
          . 
  // Buttons for confirmation dialog 
  this.buttons = [ 
    { 
      buttonModel: { 
        content: "OK", 
        cssClass: "e-flat", 
        isPrimary: true 
      }, 
      click: this.confirmationClick.bind(this) 
    }, 
    { 
      buttonModel: { 
        content: "Cancel", 
        cssClass: "e-flat" 
      }, 
      click: this.cancelClick.bind(this) 
    } 
  ]; 
  // Button for dialog when no records are selected on clicking delete 
  this.buttons1 = [ 
    { 
      buttonModel: { 
        content: "OK", 
        cssClass: "e-flat", 
        isPrimary: true 
      }, 
      click: () => { 
       // Hides the dialog 
        this.dialogInstance.hide(); 
      } 
    } 
  ]; 
} 
 
// Ok button click function 
confirmationClick(args) { 
    // Flag variables are used for checking which operation is being performed 
    if (this.isDelete) { 
      this.isDelete = false; 
      // Hides the dialog 
      this.dialogInstance.hide(); 
      // Deletes the selected record 
      this.gridInstance.deleteRecord(); 
    }  
} 
 
// Cancel button click function 
cancelClick(args) { 
    this.dialogInstance.hide(); 
} 
 
Now in the toolbar click event update the dialog content and buttons based on the clicked item and display the dialog using its show method. 
 
// Grid’s toolbarClick event function 
toolbarClick(args) { 
    // Assigning buttons to dialog instance 
    this.dialogInstance.buttons = this.buttons; 
    if (args.item.id == "delete") { 
      if (this.gridInstance.getSelectedRecords().length !== 0) { 
        this.isDelete = true; 
        // Updates the dialog content 
        this.dialogInstance.content = "Do you wish to delete the selected record?"; 
        // Displays the dialog 
        this.dialogInstance.show(); 
     } else { 
        // Updates the dialog content 
        this.dialogInstance.content = "No record selected for deletion"; 
        // Updates the button model for this scenario 
        this.dialogInstance.buttons = this.buttons1; 
        // Displays the dialog 
        this.dialogInstance.show(); 
      } 
    }  
} 
 
The dialog is hidden using its hide method while clicking the dialog buttons. Using actionBegin event we have enabled/disabled the Delete toolbar. 
 
// Grid’s cellSaved event function 
begin(args) { 
if (args.requestType === 'beginEdit') { 
      this.gridInstance.toolbarModule.toolbar.enableItems(2, false); 
    } 
    if (args.requestType === 'save') { 
      this.gridInstance.toolbarModule.toolbar.enableItems(2, true); 
    }} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Balaji Sekar. 


EP Erik Pyanto October 27, 2020 10:08 AM UTC

Hi Balaji, 

Is there a way to prevent the 'delete' from the keyboard? the example you gave, when pressing delete key, the record will be deleted without the prompt.

Thanks!

BS Balaji Sekar Syncfusion Team October 28, 2020 01:30 PM UTC

Hi Roman, 
 
To achieve the mentioned requirement we suggest you to remove the particular keyConfigs from the Grid using dataBound event of EJ2 Grid. 

Please refer the below code example and sample for more information. 
[index.js] 
dataBound() { 
    this.gridInstance.keyConfigs["delete"] = "";  // Prevent the delete key action 
  } 


 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


Loader.
Up arrow icon