1. Home
  2. Forum
  3. Angular - EJ 2
  4. custom modal validation

custom modal validation

hello !  is it possible to have  my custom modal here instead of the generic modal from the grid ?

I want to have my own modal  instead of ( Are you sure you want to Delete Record ? )

How i can acheive it 



1 Reply
SK Sujith Kumar Rajkumar Syncfusion Team August 24, 2021 11:54 AM UTC

Hi Frédéric, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to render a custom modal dialog for delete confirmation. You can achieve it by defining custom toolbar items for ‘Delete’ and render a custom dialog to perform the action by handling its click events. This is explained in detail below, 
 
First initialize the required dialog component and hide it on initial render. Here we have used the EJ2 Dialog Component itself in order to demonstrate this case for your reference, 
 
<ejs-dialog #dialog id='dialog' #ejDialog [visible]='false' isModal='true' target='#dialog-target' width='300px'> 
</ejs-dialog> 
 
Now define the Grid toolbar with custom item for ‘Delete’ action. 
 
public ngOnInit(): void { 
    this.toolbar = [{ text: "Custom Delete", tooltipText: "Delete", prefixIcon: "e-delete", id: "custom-delete"}]; 
} 
 
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(‘Delete’ on ok button click using the Grid’s deleteRecord method and close dialog on cancel button click). 
 
public ngOnInit(): void { 
    // 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: () => { 
                this.dialogInstance.hide(); 
            } 
        } 
    ]; 
} 
 
// Ok button click function 
confirmationClick() { 
    // Hides the dialog 
    this.dialogInstance.hide(); 
    // Deletes the selected record from Grid 
    this.gridInstance.deleteRecord(); 
} 
 
// Cancel button click function 
cancelClick(args) { 
    // Hides the dialog 
    this.dialogInstance.hide(); 
} 
 
Finally, in the toolbar click event(which will be triggered on custom delete toolbar button click), update the dialog content and buttons based on whether any records are selected in the Grid 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 == "custom-delete") { 
            // Updates the dialog content 
        if (this.gridInstance.getSelectedRecords().length !== 0) { 
            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(); 
        } 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
More details on the EJ2 Dialog and the Grid methods can be checked in the below documentation links, 
 
                              https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/#custom-toolbar-items 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon