Batch Edit Mode

[Simon Arnold]

I have a DataGrid in a Dialog, I also have Batch Edit mode on, as I prefer just the single field opening when clicked, unlike Inline, which opens all fields in controls, even when you have AllowEditing = false on the column, but that is not the issue, the issue is if I change say 3 or 4 rows in the grid, then click a Save button on the Dialog, I would like to call the Update on the Grid to make sure changes have been saved, but I am struggling to find the appropriate method to call, is it possible to call the Update button on the Grid or even check if you have un-saved changes in the grid.

[Simon Arnold]

I have a solution to my question, but just want to check that I am not going to cause any issues doing it this way,

It would be nice if the Grid did have an IsDirty flag which would be True if records have been edited but not had the Update Button clicked when in Batch Mode.

  <SfGrid DataSource="@Booking.Bookings"
        @ref="hrsGrid">
        <GridAggregates>
            <GridAggregate>
                <GridAggregateColumns>
                    <GridAggregateColumn Field="Id" Type="AggregateType.Count">
                        <FooterTemplate>
                            @{
                                var cost = (context as AggregateTemplateContext);
                                <div>
                                    <p>New</p><p style="display:none;">@cost.Count</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="GetBuyCost" Type="AggregateType.Sum" Format="N2">
                        <FooterTemplate>
                            @{
                                var cost = (context as AggregateTemplateContext);
                                <div>
                                    <p>£@cost.Sum</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="GetSellCost" Type="AggregateType.Sum" Format="N2">
                        <FooterTemplate>
                            @{
                                var cost = (context as AggregateTemplateContext);
                                <div>
                                    <p>£@cost.Sum</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="Hours" Type="AggregateType.Sum" Format="N1">
                        <FooterTemplate>
                            @{
                                var cost = (context as AggregateTemplateContext);
                                <div>
                                    <p>@cost.Sum</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                </GridAggregateColumns>
            </GridAggregate>
            <GridAggregate>
                <GridAggregateColumns>
                    <GridAggregateColumn Field="Id" Type="AggregateType.Count">
                        <FooterTemplate>
                            @{
                                var cost = (context as AggregateTemplateContext);
                                <div>
                                    <p>Original</p><p style="display:none;">@cost.Count</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="GetBuyCost" Type="AggregateType.Custom" Format="N2">
                        <FooterTemplate>
                            @{
                                <div>
                                    <p>£@GetOriginalCost("B")</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="GetSellCost" Type="AggregateType.Sum" Format="N2">
                        <FooterTemplate>
                            @{
                                <div>
                                    <p>£@GetOriginalCost("S")</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                    <GridAggregateColumn Field="Hours" Type="AggregateType.Custom" Format="N1">
                        <FooterTemplate>
                            @{


                                <div>
                                    <p>@GetOriginalHours()</p>
                                </div>
                            }
                        </FooterTemplate>
                    </GridAggregateColumn>
                </GridAggregateColumns>
            </GridAggregate>
        </GridAggregates>
        <GridEditSettings AllowEditing="true" Mode="EditMode.Batch" />
        <GridEvents RowDataBound="OnRowBound"
                CommandClicked="OnGridCommandClicked"
                OnCellSave="CellSaveHandler"
                TValue="EditBookingDto" />
        <GridColumns>
            <GridColumn Field="Id" IsPrimaryKey="true" AllowEditing="false" HeaderText="Booking Id" TextAlign="TextAlign.Right" />
            <GridColumn Field="StartDate" Type="ColumnType.Date" Format="dd/MM/yyyy" AllowEditing="false" HeaderText="Start Date" />
            <GridColumn Field="GetBuyCost" Type="ColumnType.Number" Format="N2" AllowEditing="false" HeaderText="Buy Cost" TextAlign="TextAlign.Right" />
            <GridColumn Field="GetSellCost" Type="ColumnType.Number" Format="N2" AllowEditing="false" HeaderText="Sale Cost" TextAlign="TextAlign.Right" />
            <GridColumn Field="Hours" Type="ColumnType.Number" Format="N1" EditType="EditType.NumericEdit" HeaderText="Hours" TextAlign="TextAlign.Right" />
            <GridColumn Width="50">
                <GridCommandColumns>
                    <GridCommandColumn Type="CommandButtonType.Edit"
                                   ButtonOption="@(new CommandButtonOptions() { IconCss="fa-solid fa-clock-rotate-left", CssClass="e-flat grid-delete-btn"})"
                                   Title="Reset Hours"
                                   ID="btnReset"></GridCommandColumn>
                </GridCommandColumns>
            </GridColumn>
        </GridColumns>
    </SfGrid>
    <hr />
    <div class="form-group row float-end">
        <div class="col-sm-12">
            <SfButton Content="Save Changes"
                  @onclick="SaveChanges"
                  Disabled="bChanges"
                  CssClass="e-primary"
                  IconCss="fa-regular fa-floppy-disk"
                  IconPosition="IconPosition.Left" />


            <SfButton Content="Cancel"
                  @onclick="OnCancelSelected"
                  CssClass="e-danger"
                  IconCss="fa-solid fa-right-from-bracket"
                  IconPosition="IconPosition.Left" />
        </div>
    </div>


@code {
private async Task CellSaveHandler(CellSaveArgs<EditBookingDto> args) {
var record = args.Data;


if (!args.Value.Equals(args.PreviousValue)) {
await hrsGrid.SetRowDataAsync(args.Data.Id, args.Data);
bChanges = false;
}
}


private async Task SaveChanges() {
await hrsGrid.EndEditAsync();
var batchChanges = await hrsGrid.GetBatchChangesAsync();
var updates = batchChanges.ChangedRecords;
await OnValidSubmit.InvokeAsync(updates);
}
}

[Naveen Palanivel]

Hi Simon,

Thanks for the further update,

We are checking your query and we will update as soon as possible.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Simon,

Greetings from Syncfusion support.

We checked your query and we suspect, when you click the button and want save the cell in batch mode. So, we suggest to use SaveCallAsync method. We also shared the UG documentation link below. Please refer the Ug documentation for your reference.

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

Please let us know if you have any concerns.

Regards,

Naveen Palanivel