EJ2 Javascript Grid: How to customize delete confirmation dialog message

Question

Hello,On my grid, I have activated showDeleteConfirmDialog to true. How to customize the delete confirmation dialog message? and adding some of selected record data. note:I have found a detail instruction for EJ1 for this case, but did not found any for EJ2 Javascript.

Rajapandiyan Settu · Accepted Answer

Hi ISMAIL, 
 
We deeply regret the inconvenience caused. 
 
In the previous update we have used htmlstring element in the ConfirmDelete message. This is the cause of reported behavior. Based on the EJ2 Grid architecture, we need to use only string values for the locale keywords. Find the modified code example for your reference. Now you can perform delete operation in the Grid.  
 




 
[index.js] 
 
 
function toolbarClick(args) { 
  if (args.item.text == 'Delete' && args.item.id == this.element.id + '_delete') { 
    var selectedRecords = this.getSelectedRecords(); 
    if (selectedRecords.length > 0) { 
      var value = ''; 
      var columns = this.getColumns(); 
      for (var i = 0; i < columns.length; i++) { 
        value = value + columns[i].field + ' - ' + selectedRecords[0][columns[i].field] + ' '; 
      } 
      // bind string values only for locale keywords (don’t use htmlstring element) 
      this.defaultLocale.ConfirmDelete = 'Click OK to Delete Record of :(' + value + ')'; 
    } 
  } 
} 
 
 
 
Sample: https://stackblitz.com/edit/oma8dk-popu4q 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Rajapandiyan Settu · Answer

Hi ISMAIL,    
  
Thanks for contacting Syncfusion support. 
  
Query: On my grid, I have activated showDeleteConfirmDialog to true. How to customize the delete confirmation dialog message? 
   
Based on your query, you want to customize the default text of Delete confirm dialog message. You can achieve your requirement by using Globalization in Grid. Please refer to the below documentation for more information.  
   
Globalization:  
https://ej2.syncfusion.com/javascript/documentation/grid/global-local/ 
https://ej2.syncfusion.com/documentation/grid/global-local/ 
   
The Localization library allows you to localize default text content of the Grid and other controls. The grid component has static text on some features (like Filter Dialog, Edit Dialog, Group drop area text, Pager information text, etc.) that can be customized by loading its custom text in L10n. Please refer to the below code example and sample for more information.  
  




 
ej.base.L10n.load({ 
  'en-US': { 
    grid: { 
      ConfirmDelete: 'Click Ok to delete the record' 
    } 
  } 
}); 
  
  
Sample: https://stackblitz.com/edit/oma8dk 
  
Please get back to us if you need further assistance with this.  
  
Regards,     
Rajapandiyan S

ISMAIL HAMZAH · Answer

Hi Rajapandiyan,Thank you for your support. I have try your suggestion and its work: But the problem is, I want show selected row data to be showed at delete confirmation  content, how do I do that?. Like the one describe at EJ1: https://www.syncfusion.com/kb/5059/how-to-customize-the-delete-confirmation-dialog

Best,Ismail

Rajapandiyan Settu · Answer

Hi ISMAIL, Thanks for your update. Based on your query, you want to show the selected record details in the delete confirm dialog. You can achieve your requirement in the toolbarClick event. When you click the Delete button in the toolbar, the toolbarClick event will be triggered. In that event, we customize the ConfirmDelete message based on the selected record’s details. Find the below code example and sample for more information. toolbarClick: https://ej2.syncfusion.com/javascript/documentation/api/grid/#toolbarclick getSelectedRecords(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#getselectedrecords getColumns(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#getcolumns [index.js] var grid = new ej.grids.Grid({ dataSource: window.orderData, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true }, allowPaging: true, pageSettings: { pageCount: 5 }, toolbar: ['Add', 'Edit', 'Delete', 'Cancel', 'Update'], toolbarClick: toolbarClick, columns: [ ---- ] }); grid.appendTo('#Grid'); function toolbarClick(args) { if ( args.item.text == 'Delete' && args.item.id == this.element.id + '_delete') { // perform the below action when click the Delete button // get the selected Records var selectedRecords = this.getSelectedRecords(); if (selectedRecords.length > 0) { var value = ''; // get the columns in Grid var columns = this.getColumns(); // get the cell values from the selected record for (var i = 0; i < columns.length; i++) { value = value + columns[i].field + ' - ' + selectedRecords[0][columns[i].field] + '
' + '
'; } // customize the confirmDelete message based on the selected record this.defaultLocale.ConfirmDelete = 'Click OK to Delete Record of ' + '

' + value; } } } Sample: https://stackblitz.com/edit/oma8dk-mcar5m Screenshot: Please get back to us if you need further assistance with this. Regards, Rajapandiyan S

ISMAIL HAMZAH · Answer

Hi Rajapandiyan,Thank you for your support, your suggestion work perfectly!Best regards,Ismail

ISMAIL HAMZAH · Answer

Hi Rajapandiyan,After full testing, it seems handling the toolbarClick make the default behaviour not working. In other words, it did not delete the data.note:I'm using RemoteSaveAdaptor for actual CRUD process: var dataSource = new ej.data.DataManager({ json: [], adaptor: new ej.data.RemoteSaveAdaptor(), insertUrl: '/api/Todo/Insert', updateUrl: '/api/Todo/Update', removeUrl: '/api/Todo/Delete', });Does it means I should override the delete process at toolbarClick? by calling the delete API manually? Or I can "kind of" call some method at toolbarClick so the Delete process still handled by DataManager RemoteSaveAdaptor. Please advice.toolbarClick: (args) => { if (args.item.id === grid.element.id + '_excelexport') { grid.showSpinner(); grid.excelExport(); } if (args.item.id === grid.element.id + '_delete') { var selectedRecords = grid.getSelectedRecords(); if (selectedRecords.length > 0) { var value = ''; var columns = grid.getColumns(); for (var i = 0; i < columns.length; i++) { value = value + columns[i].field + ' - ' + selectedRecords[0][columns[i].field] + '
' + '
'; } grid.defaultLocale.ConfirmDelete = 'Are you sure want to delete? ' + '

' + value; } } },Best regards,Ismail

ISMAIL HAMZAH · Answer

Hi Rajapandiyan,Its work after removing HTML string as per your suggestions. Thank you for your kind support.Best regards,Ismail.

Rajapandiyan Settu · Answer

Hi ISMAIL, 
 
We are glad that the provided solution resolved your requirement. 
Please get back to us if you need further assistance. 
 
Regards, 
Rajapandiyan S