1. Home
  2. Forum
  3. Blazor
  4. Blazor Grid: How to update grid to remove particular row, e.g when it has been deleted in database

Blazor Grid: How to update grid to remove particular row, e.g when it has been deleted in database

I use a custom adapter that fetches data from database.

When I receive an domain event, that particular record has been deleted, I want to update the grid to remove the row, without loosing batch changes in other rows, if there are any.

Folowing does not work:

int deletedRecordId = ...
var records = await DataGrid!.GetCurrentViewRecords();
var record = records.Find(r => r.Id == deletedRecordId);
if (record != null)
{
    await DataGrid.DeleteRecord("Id",  record);
}

I cannot call DataGrid.Refresh, because it would cancel batch changes, if there are any. I just want to delete the singe row.

3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team November 13, 2020 05:58 AM UTC

Hi Liero,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I want to update the grid to remove the row, without loosing batch changes in other rows, if there are any. Folowing does not work:” 
 
We have analyzed the reported query at our end by preparing a sample using your code example and we are able to delete record  / row from Grid using DeleteRecord method of the Grid. Kindly download the sample from below  
 
 
After referring the sample, if you are still facing the reported issue. kindly ensure the following details.  
 
  1. Have your enabled PrimaryKey column in Grid whose value is unique?
  2. Also ensure that you have enabled AllowDeleting property of GridEditSettings.
  3. Also confirm that Id property mentioned in the DeleteRecord denotes the PrimaryKey column?
 
After ensuring the above scenario, if you are facing the issue. Kindly get back to us with more details about the issue along with issue reproducible sample. It will be very helpful for us to validate the reported query at our end and provide solution as early as possible.  
 
Regards, 
Vignesh Natarajan 


LI Liero November 13, 2020 09:15 AM UTC

Hi Vignesh, thanks for the sample.

I see two problems here.

1. I want to remove the row from Grid when I receive notification, that is has been removed from database. It is unacceptable to ask user to click the "Update" button, because the user hasn't done any changes.

2. I have a custom data adaptor that queries data from database using EF Core. I can't call DataGrid.EndEdit() or DataGrid.DataManager.SaveChanges(), because it would attempt to delete already deleted record.

All I need is to update the grid to reflect changes in database. I was able to update the row, when I receive notification from DB that it has been updated, but don't know how to delete it from the grid. This is pretty basic requirement I would say :O

VN Vignesh Natarajan Syncfusion Team November 16, 2020 04:56 AM UTC

Hi Liero,  

Thanks for the update.  

Query1: “I want to remove the row from Grid when I receive notification, that is has been removed from database” 
 
We have analyzed your query and we suggest you to achieve your requirement by calling EndEdit() method of Grid after the DeleteRecord method. Refer the below code example.  

<SfGrid @ref="DataGrid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" ShowConfirmDialog="false" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> DataGrid { get; set; } 
    public List<Order> Orders { get; set; } 
    public async Task Del() 
    { 
        var records = await DataGrid!.GetCurrentViewRecords(); 
        var record = records.Find(r => r.OrderID == Orders[new Random().Next(5)].OrderID); 
        if (record != null) 
        { 
            await DataGrid.DeleteRecord("OrderID", record); //to delete the record from UI 
 
            await DataGrid.EndEdit(); // to save the changes (deleted record) in database / grid. 
        } 
    } 

 


Query2: “I have a custom data adaptor that queries data from database using EF Core.” 
 
CustomAdaptor with CRUD operation (BatchEditing) will call BatchUpdate / BatchUpdateAsync method is CustomAdaptor to save the changes in database. Above method EndEdit() calling after the DeleteRecord() will trigger this method in CustomAdaptor and changes will be saved in database as well as Grid. it does not require any external action or refresh to reflect them in Grid.  


If you are still facing issue, kindly get back to us with more details (along with CustomAdaptor) about the issue you are facing.    

Regards,
Vignesh Natarajan  

 


Marked as answer
Loader.
Up arrow icon