Search code examples
c#blazorblazor-server-sidesyncfusion

How to call OnBatchSave="BeforeSave"


I have a problem with my custom SfDialog. First I explain what I want to happen. Namely, after the user has made a change to the grid and then click on Update in the toolbar appears my Custom SfDialog, this dialog should serve to secure the user, whether he or she is really sure to make an update to the DB. So far so good. Now if the user then clicks on Yes in the dialog, should be called by the logic, the method BeforeSave to really save the changes in the DB.

My problem is that I don't really know how to call the method BeforeSave. I have tried this so far:

My relevant Syncfusion Grid and Custom Dialog

<SfGrid DataSource="@GridData"@ref="Grid" AllowPaging="true" AllowSorting="true"
    Toolbar="@(new List<string>() {"Add","Update", "Cancel","Delete","Search"})" Height="250">
<GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" ShowConfirmDialog="false"
                  Mode="EditMode.Batch"></GridEditSettings>
<GridPageSettings PageSizes="@(new string[] {"5", "10", "15", "All" })" PageSize="5"></GridPageSettings>
<GridEvents TValue="Role" OnToolbarClick="ToolbarClickHandler" OnBatchSave="BeforeSave"></GridEvents>
 <GridColumns>
  <!-- irrelvant grid columns -->
 </GridColumns>
</SfGrid>

<SfDialog @ref="DialogUpdate" Width="250px" Visible="false" IsModal="true">
 <DialogTemplates>
    <Content> Sind Sie sicher, dass Sie die Änderungen rückgängig machen wollen?</Content>
    <FooterTemplate>
        <SfButton OnClick="@OkClick" Content="Ja" IsPrimary="true"></SfButton>
        <SfButton OnClick="@CancelClick" Content="Nein"></SfButton>
    </FooterTemplate>
 </DialogTemplates>
</SfDialog>

@code{} logic

    public async Task ToolbarClickHandler(ClickEventArgs args)
{
    if(args.Item.Text == "Update")
    {
        await DialogUpdate!.ShowAsync();
        args.Cancel = true;
    }
}

    private async Task OkClick()
{
    if (DialogUpdate != null)
    {
        await DialogUpdate.HideAsync();
        await BeforeSave(new BeforeBatchSaveArgs<Role>());
    }
}

public async Task BeforeSave(BeforeBatchSaveArgs<Role> args){
  var changedRecords = args.BatchChanges.ChangedRecords; //Throws Exception when called like I did
//... irrelevant code for saving data in db 
}

Doing it like this Throws an Exception at the start of the BeforeSave methode. I have no idea how to call the methode otherwise, because the parameter args gets its values from the SfGrid.


Solution

  • To avoid the problem, use the grid's public method EndEditAsync to programmatically update the values in the grid. This should be done when the OnBatchSave event is triggered, so you can obtain the changed records to meet your requirements. Please refer to the code snippet and sample below for your reference

    <SfGrid @ref="Grid" TValue="Order" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315">
    
    SfGrid<Order> Grid { get; set; }
    private async Task OkClick()
    {
        if (DialogUpdate != null)
        {
            await DialogUpdate.HideAsync();
            await Grid.EndEditAsync();
        }
    }
    
    public async Task BeforeSave(BeforeBatchSaveArgs<Order> args)
    {
      
        var changedRecords = args.BatchChanges.ChangedRecords; 
    }
    

    Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync