1. Home
  2. Forum
  3. Angular - EJ 2
  4. Use Modal Component on Edit & Delete Service with Confirmation Dialog

Use Modal Component on Edit & Delete Service with Confirmation Dialog

Hello, I have spent several days trying to piece together parts of the documentation to get my code to work, but I have been unsuccessful.

Can you please provide me a working example of

1. Angular grid

2. Command column

3. Edit button in the command column pops up a modal component instead of a syncfusion dialog (This modal component is used in several places). This is where the trouble starts. I can get the modal component to pop up doing this:
  commandClick(args: CommandClickEventArgs): void {
    console.log(args);
    if (args.commandColumn.type == "Delete"){
      //this._groupService.deleteGroup(args.rowData["GroupId"]);
    }
    if (args.commandColumn.type == "Edit"){
      this.showGroupDetails(args.rowData);
    }
    //alert(JSON.stringify(args.rowData));
  }

But it also pops up the syncfusion dialog on top of the modal, so I am missing something.

4. Use a custom delete service AFTER confirming you want to delete. Having a similar problem here as in #3. I have showDeleteConfirmDialog set to true, but it shows up after it already runs the actual delete... so... not quite as useful at that point, haha.
this.toolbarOptions = ['Search'];
    this.wrapSettings = {wrapMode: 'Content'};
    this.editSettings = { allowEditing: true, allowDeleting: true, showDeleteConfirmDialog: true, mode: 'Dialog' };
    this.commands = [{ buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
                      { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
                      { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
                      { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }];







1 Reply 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team January 19, 2021 11:45 AM UTC

Hi Jessica, 
 
Greetings from Syncfusion support. 
 
Please find the response for your queries below, 
 
Query – 1: “Edit button in the command column pops up a modal component instead of a syncfusion dialog” 
 
You can achieve your requirement of rendering your modal component for performing the Grid edit action by cancelling the default edit action, showing the custom modal popup and using the Grid method to perform the save action. This is explained in detail below, 
 
Initially cancel the default edit action by setting the Grid’s actionBegin event arguments cancel property as ‘false’ when the requestType is ‘beginEdit’. After this you can show your custom popup for performing the edit action and on clicking ‘save’ button you can pass this data to the Grid’s updateRow method for updating it in the Grid. This can be handled using a flag variable which is disabled in the actionComplete event so that it can enter the condition on next execution. 
 
This is demonstrated in the below code snippet, 
 
public flag = false; 
 
// Grid’s actionBegin event handler 
actionBegin(e) { 
    // Initially flag needs to be false in order to enter this condition 
    if (!this.flag) { 
        // Edit operation 
        if (e.requestType == "beginEdit") { 
            // Current editeds row data 
            var editedData = e.rowData; 
            // The default edit operation is cancelled 
            e.cancel = true; 
            // Here you can open your custom modal edit popup 
            this.dialogObj.show(); 
        } 
    } 
} 
 
// Modal popup save button click function 
dlgOKButtonClick(args) { 
    // The edit input elements are retrieved 
    var editInputs = (this.dialogObj as any).contentEle.querySelectorAll('input'); 
    var newData = []; 
    // The updated input values are pushed into an array based on their field names(which can be set as the input element name) 
    editInputs.forEach(ele => { newData[ele.name] = (ele.name === "OrderID") ? parseInt(ele.value) : ele.value }); 
    // Modal popup is hidden 
    this.dialogObj.hide(); 
    // The global flag is enabled so that the ‘cancel’ action written in the actionBegin event is not executed for this case 
    this.flag = true; 
    // Row index to be updated is retrieved using its primary key value 
    var rowIndex = this.gridObj.getRowIndexByPrimaryKey(newData["OrderID"]); 
    // New data is updated to the Grid 
    this.gridObj.updateRow(rowIndex, newData); 
} 
 
// Grid’s actionComplete event handler 
// Triggers after an action is completed in the Grid 
actionComplete(e) { 
    if (e.requestType === "save") { 
        // The global flag variable is disabled after operation is successfully performed so that it can enter the condition on next execution 
        this.flag = false; 
    } 
} 
 
Query – 2: “Use a custom delete service AFTER confirming you want to delete. Having a similar problem here as in #3. I have showDeleteConfirmDialog set to true, but it shows up after it already runs the actual delete” 
 
You can use the same approach as suggested for the previous query to achieve this requirement also. This is explained in detail for the delete action below, 
 
Initially cancel the default delete action by setting the Grid’s actionBegin event arguments cancel property as ‘false’ when the requestType is ‘delete’. After this you can show your custom delete confirmation dialog where on clicking the confirmation button, the Grid’s deleteRecord method can be called(deletes the currently selected record) for performing the delete action. This can be handled using a flag variable which is disabled in the actionComplete event so that it can enter the condition on next execution. 
 
This is demonstrated in the below code snippet, 
 
public flag = false; 
 
// Grid’s actionBegin event handler 
actionBegin(e) { 
    // Initially flag needs to be false in order to enter this condition 
    if (!this.flag) { 
        // Delete operation 
        if (e.requestType == "delete") { 
            // The default delete operation is cancelled 
            e.cancel = true;  
            // Here you can open your custom modal delete popup 
            this.deleteDialogObj.show(); 
        } 
    } 
} 
 
// Modal popup delete confirmation button click function 
deleteDlgOKButtonClick(args) { 
    // Modal popup is hidden 
    this.deleteDialogObj.hide(); 
    // The global flag is enabled so that the ‘cancel’ action written in the actionBegin event is not executed for this case 
    this.flag = true;  
    // Currently selected record will be deleted from the Grid 
    this.gridObj.deleteRecord(); 
} 
 
// Grid’s actionComplete event handler 
// Triggers after an action is completed in the Grid 
actionComplete(e) { 
    if (e.requestType === "delete") { 
        // The global flag variable is disabled after operation is successfully performed so that it can enter the condition on next execution 
        this.flag = false; 
    } 
} 
 
We have prepared a sample based on the above queries for your reference. You can find it below, 
 
 
Note: In this sample we have rendered the EJ2 Dialog itself as custom modal popup for demonstrating your use-case. Here you can use your required custom modal to perform the same. This can also be done using the same approach for ‘Add’ action also. 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon