Inline editing toolbar event handler

[P Grkovic]

Hello,

I might be doing something wrong, but I'm trying to implement Update when performing inline edit in SfGrid. SfGrid datasource is list of DTOs, so when a user double-clicks on a field and edits it and then presses Update toolbar button, I need to call the service and pass updated DTO. I tried by defining OnToolbarClick="ToolbarClickHandler" and then switching by args.Item.Text:
 

private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
    switch (args.Item.Text)
    {
        case "Add":
            AddNew();
            break;
        case "Edit":
        {
            if (Grid.SelectedRecords.Count != 0)
            {
                Edit(Grid.SelectedRecords.First().Id);
            }

            break;
        }
        case "Update":
        {
            await Service.UpdateAsync(Grid.SelectedRecords.First());
            break;
        }
        case "Delete":
        {
            await Service.Remove(Grid.SelectedRecords.First().Id);
            await LoadData();
            break;
        }
    }
}

Unfortunately, this doesn't work, because SelectedRecords is empty when Update button gets clicked. How can I get the updated record (DTO) in this function when the user clicks on Update button?

[Prathap Senthil]

Hi P Grkovic,

Greetings from Syncfusion,

Based on your requirements, we suggest using the RowUpdating and RowDeleting events to achieve your requirements. Kindly refer to the code snippet and sample below for reference.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal"></GridEditSettings>
<GridEvents RowUpdated="RowUpdatedHandler" RowDeleted="RowDeletedHandler" TValue="Order"></GridEvents>
<GridColumns>
</SfGrid>

@code {


    public async Task RowUpdatedHandler(RowUpdatedEventArgs<Order> args)
    {
       // await Service.UpdateAsync(args.Data);
    }

    public async Task RowDeletedHandler(RowDeletedEventArgs<Order> args)
    {
       // await Service.Remove(args.Datas[0].Id);
    }

Reference:
https://blazor.syncfusion.com/documentation/datagrid/events#rowdeleted
https://blazor.syncfusion.com/documentation/datagrid/events#rowupdated

Regards,
Prathap Senthil

[P Grkovic]

Thanks a lot Prathap,

meanwhile, I came across the following solution, but will consider yours too:

<GridEvents OnActionComplete="ActionCompleteHandler" TValue="OrderDto"></GridEvents>
...​

private async Task ActionCompleteHandler(ActionEventArgs<OrderDto> arg)
{
    if (arg.RequestType == Action.Save)
    {
        await Service.UpdateAsync(arg.Data);
    }
}

[Prathap Senthil]

Yes, your approach is valid. However, we would like to inform you that the ActionBegin event for CRUD actions will soon be deprecated. We have introduced separate events for each CRUD operation, and it is recommended that you handle specific actions with the new events instead. In your case, we suggest using the RowUpdating event to achieve your requirement.

References:

• RowUpdating Event
• RowUpdated Event
• RowDeleting Event
• RowDeleted Event
• Release Notes for Version 23.1.36

New Event Information

Event Name	Argument Name	Properties	Description
RowCreating	RowCreatingEventArgs	Cancel, Data, Index, EditContext	Gets or sets the event callback that is raised before the add action is performed in the grid.
RowCreated	RowCreatedEventArgs	Data, Index, EditContext	Gets or sets the event callback that is raised after the add action is performed in the grid.
RowUpdating	RowUpdatingEventArgs	Cancel, IsShiftKeyPressed, KeyCode, Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue	Gets or sets the event callback that is raised before the save action is performed in the grid.
RowUpdated	RowUpdatedEventArgs	Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue	Gets or sets the event callback that is raised after the save action is performed in the grid.
RowDeleting	RowDeletingEventArgs	Cancel, Datas, PrimaryKeys	Gets or sets the event callback that is raised before the delete action is performed in the grid.
RowDeleted	RowDeletedEventArgs	Datas, PrimaryKeys	Gets or sets the event callback that is raised after the delete action is performed in the grid.
EditCanceling	EditCancelingEventArgs	Cancel, Data, PreviousData, PrimaryKeys, Index	Gets or sets the event callback that is invoked before the cancel action is performed in the grid, specifically when using normal and dialog edit modes.
EditCanceled	EditCanceledEventArgs	Data, PreviousData, PrimaryKeys, Index	Gets or sets the event callback that is invoked after the cancel action is performed in the grid, specifically when using normal and dialog edit modes.
OnRowEditStart	OnRowEditStartEventArgs	Cancel, PreventDataClone	Gets or sets the event callback that is raised before an editing action is performed in the grid.
RowEditing	RowEditingEventArgs	Cancel, PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData	Gets or sets the event callback that is raised before the edit action is performed in the grid.
RowEdited	RowEditedEventArgs	PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData	Gets or sets the event callback that is raised after the edit action is performed in the grid.