Grid Delete row

[Candeloro Sgarlata]

In a grid, I request to delete a  selected row (using the DELETE button on the toolbar); the row is deleted even if the server, to which I sent the cancellation request, gives me an error.

Is't possible to condition the elimination to the positive outcome of the http request?

delete (id:number){

    

    this.http.delete(`${DELETELOG}?idLog=${id}`)

    .subscribe(

      result=>{     

       

           this.store.delete(id)

        

        },      

      error=>this.error = <any>error.message,

      ()=>{  }

   )

  }

[Thiyagu Subramani]

Hi Candeloro, 

Thanks for contacting Syncfusion forum. 

Based on your reported information, your requirement is to delete a row from the grid. But in this case, we assume that you are binding your own remote service to retrieve data to the grid, and that this remote service does not handle delete actions, so that only this issue may arise. This isn't a grid issue. So please share the details below, so we will only provide the appropriate solution as soon as possible. 

1. Please share your complete rendering code.
2. Share video demonstration of your issue.
3. If possible share issue reproducing sample.

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Candeloro Sgarlata]

Hi Thiyagu S 

I use actionBegin () to manage pressing the Toolbar's Delete button and I found that deleting the grid line is independent of the outcome of the deletion on the server.

I bypassed the problem by creating my own button in the toolbar

 Following is what I developed but abandoned

Regards

actionBegin(args:SaveEventArgs): void {

   

        if (args.requestType === 'delete') {

              

              const value = args.data[0]

           

              this.delete(value.Id)

         

        

        }

    }

   

   delete (id:number){

    

    this.http.delete(`${DELETELOG}?idLog=${id}`)

    .subscribe(

      result=>{           

           this.store.delete(id)  

         

        },      

        error=>console.log (error.message)       

     

)

  }

[Thiyagu Subramani]

Hi Candeloro, 

Thanks for your update. 

Based on your reported information we have prepared a sample using as per your requirement. Here we have added custom delete button using custom toolbar item and its toolbarclick event we have handled delete operation using http delete. 

Please refer to the below code and  sample link. 

public dataSourceChanged(state: DataSourceChangedEventArgs): void { 

        . . . . .  .  

        } else if (state.requestType === 'delete') { 

            this.crudService.deleteRecord(state).subscribe(() => { 

                state.endEdit(); 

              }); 

        } 

    } 

    public ngOnInit(): void { 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 

        this.toolbar = ['Add', 'Edit', { text: 'Custom Delete', tooltipText: 'Delete', id: 'custom_delete' }, 'Update', 'Cancel']; 

        const state: any = { skip: 0, take: 12 }; 

        this.crudService.execute(state); 

    } 

    toolbarClick(args){ 

       if (args.item.text = 'Custom Delete'){ 

              this.grid.deleteRecord(); 

       } 

    } 

[crud.service.ts] 

deleteRecord(state: any): Observable<Customer> { debugger; 

    const id = state.data[0].id; 

    const url = `${this.customersUrl}/${id}`; 

 

    return this.http.delete<Customer>(url, httpOptions); 

  } 

Sample link :  https://stackblitz.com/edit/angular-umeuhb-zzyndc?file=normal-edit.component.ts 

If still facing the issue, please share the below details. 

1. Please share your issue reproducing sample or reproduce the issue in above sample.
2. Share complete grid rendering code.

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Candeloro Sgarlata]

Hello

Thank you for help. My problem is solved!

Regards

[Thiyagu Subramani]

Hi Candeloro, 

Thanks for your update. 

We are happy to hear that your issue has been resolved. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S