custom delete implementation

[jose lara]

Hi, currently when I click the "delete" option on the toolbar, it only removes from the grid. How can I write my own handler for delete? I want to trigger an API call when trying to delete a record. I tried using click handler to define my own toolbar item, but it looked like too much. 

[Thiyagu Subramani]

 Hi Jose, 

 

Greetings from Syncfusion support. 

 

Thanks for your patience. 

 

We have analyzed the reported query “custom delete implementation” at our end. 

 

Using deleteRecord method, we have achieved your requirement at our end.  Here deletion happened only after a required grid data was selected. 

 

Please refer this below code example.  

 

[app.component.ts] 

 

BtnClick() { 

    this.grid.deleteRecord(); 

 } 

 

[app.component.html] 

 

 

<button class='e-btn' (click)="BtnClick()">Delete</button> 

 

 

 

Refer the help documentation: 

 

Link : https://ej2.syncfusion.com/angular/documentation/api/grid/#deleterecord 

 

Sample link:  https://stackblitz.com/edit/angular-kji3cs-n9wplg?file=app.component.html 

 

Please check the sample/documentation link and get back to us, if you require any further assistance on this. 

 

Regards, 

Thiyagu S 

[jose lara]

Hi Thiyagu, thx for your response. I don't want to add a separate delete button as shown in your example. I want to be able to use the existing delete button on the toolbar and then write my own implementation for it.

[Balaji Sekar]

Hi Jose, 

Based on your query, we have modified a sample with your requirement and you can able to write your own implementation while we do delete action using “toolbarClick” event of EJ2 Grid. please refer the below code example and sample for more information. 

[app.component.html] 

<ejs-grid #grid id="grid" [dataSource] = 'data'(toolbarClick) = "toolbarClick($event)" [editSettings] = 'editSettings'[toolbar] = "toolbar" height = '300px' > 

        <e-columns> 

      .     .     .     . 

      </e-columns > 

       </ejs-grid> 

 

[app.component.ts] 

toolbarClick(args) { 

        if (args.item.id == "grid_delete") { 

            // Write Your code here 

        } 

    } 

Sample link: https://stackblitz.com/edit/angular-kji3cs-gfffbh?file=app.component.html 

Regards, 

Balaji Sekar.