Confirm Inline Editing by focusout or mouse click

[ZMI Dev]

Is it possible to confirm a row inline edit confirmation outside of the grid, like it does by using Tab or Enter?

For example:
I have a grid and the users last action was "Add", he enters some data and now he doesn't confirm that action by the "Update" button and than he presses "Save" in his view. Now the last data isnt saved, because the grid still not know about the unconfirmed data row.

In the best case we would like to use something like "focusout" with confirmes automatically.
So we can implement this in every grid.

Best regards

[Prathap Senthil]

Hi DS,

Greetings from Syncfusion support.

We analyzed your query and we suggest you to call the EndEditAsync method of Grid to programmatically save the changes to Grid. Based on your requirement, we suggest you to use Edit Template for the last editable cell in Grid row and call the EndEditAsync method when focusing out of the particular component rendered inside EditTemplate.

In the below code, we have used OnBlur event of SfTextBox, which will be triggered when focusing out of SfTextBox. Please refer the code snippet for your reference.

 

<SfGrid @ref="GridRef" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID)  HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150">

              <EditTemplate>

                <SfTextBox ID="ShipCountry" @bind-Value="@((context as Order).ShipCountry)" OnBlur="OnBlur"></SfTextBox>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    SfGrid<Order> GridRef;

    public async Task OnBlur()

    {

        await GridRef.EndEditAsync();

    }

……………..

}

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

Kindly get back to us if you have any further queries.

Regards,

Prathap S

Attachment: BlazorApp1_1dd53188.zip