EJ2 Javascript Grid: How to customize delete confirmation dialog message

[ISMAIL HAMZAH]

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]

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]

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]

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] + '</br>' + '</br>'; 

      } 

      // customize the confirmDelete message based on the selected record 

      this.defaultLocale.ConfirmDelete =  '<b>Click OK to Delete Record of </b>' + '</br></br>' + 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]

Hi Rajapandiyan,

Thank you for your support, your suggestion work perfectly!

Best regards,

Ismail

[ISMAIL HAMZAH]

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] + '</br>' + '</br>';

                        }

                        grid.defaultLocale.ConfirmDelete = '<b>Are you sure want to delete? </b>' + '</br></br>' + value;

                    }

                }

            },

Best regards,

Ismail

[Rajapandiyan Settu]

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 

[ISMAIL HAMZAH]

Hi Rajapandiyan,

Its work after removing HTML string as per your suggestions. 

Thank you for your kind support.

Best regards,

Ismail.

[Rajapandiyan Settu]

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