We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

custom delete implementation

Thread ID:





147133 Sep 3,2019 12:25 AM UTC Sep 4,2019 01:13 PM UTC Angular - EJ 2 3
Tags: Grid
jose lara
Asked On September 3, 2019 12:25 AM UTC

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 [Syncfusion]
Replied On September 3, 2019 10:35 AM UTC

 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.  
BtnClick() { 
<button class='e-btn' (click)="BtnClick()">Delete</button> 
Refer the help documentation: 
Please check the sample/documentation link and get back to us, if you require any further assistance on this. 
Thiyagu S 

jose lara
Replied On September 3, 2019 02:30 PM UTC

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 [Syncfusion]
Replied On September 4, 2019 01:13 PM UTC

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. 
<ejs-grid #grid id="grid" [dataSource] = 'data'(toolbarClick) = "toolbarClick($event)" [editSettings] = 'editSettings'[toolbar] = "toolbar" height = '300px' > 
      .     .     .     . 
      </e-columns > 

toolbarClick(args) { 
        if (args.item.id == "grid_delete") { 
            // Write Your code here 

Balaji Sekar. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon