Blazor Grid: Save change onCellSaved()

[Liero]

I'm trying to get as close to MS Access datagrid as possible.

I want single cell editing (not entire row, just the selected cell) and I want to save changes to datasource as soon as the cell is edited (probably OnCellSaved callback).

The closest I was able to get was with EditMode.Batch and SelectionMode.Cell, however the data are not updated until I click Update.

Please note, that after the update, I should not loose the edit mode. For example,

GIVEN I'm editing row 1, column A

WHEN I press enter

THEN The changes should be saved AND and row 2 column A should go to edit mode.

[Vignesh Natarajan]

Hi Liero,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The closest I was able to get was with EditMode.Batch and SelectionMode.Cell, however the data are not updated until I click Update.” 

 

We have analyzed your query and we suggest you to achieve your requirement by calling EndEdit() method of Grid in CellSaved event of the Grid. By default while saving the changes in Grid, confirmation dialog will shown. You can disable the popup using ShowConfirmDialog property of GridEditSettings.  

 

Refer the below code example 

 

<SfGrid @ref="GridInstance" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Cancel", "Update" })"> 

    <GridEditSettings AllowEditing="true" ShowConfirmDialog="false" Mode="EditMode.Batch"></GridEditSettings> 

    <GridEvents CellSelected="CellSelectHandler" CellSaved="Saved" TValue="Order"></GridEvents> 

. . . . . .  

</SfGrid> 

  

@code{ 

    SfGrid<Order> GridInstance { get; set; } 

    public async Task Saved(CellSaveArgs<Order> Args) 

    { 

        await GridInstance.EndEdit(); 

    } 

   

Refer our API documentation for your reference 

 

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

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

 

[Liero]

Hi @Vignesh,

I don't want to end edit mode. I just want to save changes, but allow user to continue editing.

I've tried also:

async Task CellSaved(CellSaveArgs<Item> e)

    {

        if (!object.Equals(e.Value, e.PreviousValue))

        {

            await grid.EndEdit();

            await grid.StartEdit();

        }

    }

but it doesn't work

[Vignesh Natarajan]

Hi Liero,  

 

Query: “I don't want to end edit mode. I just want to save changes, but allow user to continue editing.” 

 

We suggest you to achieve your requirement EditCell() method of Grid instead of StartEdit() method. StartEdit() method is used to edit a record while using normal / dialog edit mode. For batch editing kindly use EditCell method of Grid. refer the below code example.  

 

<SfGrid @ref="GridInstance" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Cancel", "Update" })"> 

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings> 

    <GridEditSettings AllowEditing="true" ShowConfirmDialog="false" Mode="EditMode.Batch"></GridEditSettings> 

    <GridEvents CellSaved="CellSaved" TValue="Order"></GridEvents> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> GridInstance { get; set; } 

    async Task CellSaved(CellSaveArgs<Order> e) 

    { 

        if (!object.Equals(e.Value, e.PreviousValue)) 

        { 

            await GridInstance.EndEdit(); 

            // get the row index using the primarykey value 

            var RowIndex = await GridInstance.GetRowIndexByPrimaryKey(e.RowData.OrderID); 

            // edit the selected cell using the cell index and column name 

            await GridInstance.EditCell(RowIndex + 1, e.ColumnName); 

        } 

    } 

 

   

Note: row index must be passed to edit the next row cell. So we have used GetRowIndexPrimaryKey method to get the row index.  

 

For your convenience we have prepared a sample using above solution which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159578/ze/DataGrid-1430262373  

 

Refer our UG documentation for your reference 

 

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

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Liero]

I have just noticed that the batch changes are not applied to the original entity instance.
Is it possible to apply the cell changes to original instance?

[Vignesh Natarajan]

Hi Liero,  

 

Query: “I have just noticed that the batch changes are not applied to the original entity instance. Is it possible to apply the cell changes to original instance?” 

 

We have analyzed the reported query and we suspect that you are facing trouble (changes were not updated in database) when updating a cell in Grid. In the previous solution we have suggested you to call the EndEdit() method of the Grid to save changes in Grid. While saving the changes in Grid, OnBatchSave event of the Grid will be triggered. In this event we suggest you to update your database. 

 

In the event arguments we can find the details regarding the changes performed in Grid. Refer the below code example.  

 

<SfGrid @ref="GridInstance" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Cancel", "Update" })">    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>    <GridEditSettings AllowEditing="true" ShowConfirmDialog="false" Mode="EditMode.Batch"></GridEditSettings>    <GridEvents CellSaved="CellSaved" OnBatchSave="BatchSave" TValue="Order"></GridEvents>    . . .</SfGrid> @code{    SfGrid<Order> GridInstance { get; set; }    public void BatchSave(BeforeBatchSaveArgs<Order> Args)    {        // update your database here    }     async Task CellSaved(CellSaveArgs<Order> e)    {        if (!object.Equals(e.Value, e.PreviousValue))        {            await GridInstance.EndEdit();            // get the row index using the primarykey value            var RowIndex = await GridInstance.GetRowIndexByPrimaryKey(e.RowData.OrderID);            // edit the selected cell using the cell index and column name            await GridInstance.EditCell(RowIndex + 1, e.ColumnName);        }    }

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#onbatchsave  

 

Please get back to us if you have further queries or if above solution does not resolve your query.  

 

Regards, 

Vignesh Natarajan