Reply To: Proper way to update changes made on data grid editing (Blazor)

[admin]

Hi and thanks for trying our Blazor DataGrid,

I prepared a sample which shows how to use the Editing events.

@page "/grid-editing-events"

@using Smart.Blazor.Demos.Data
@using System.Text.Json;
@using System.Text.Json.Serialization;
@inject RandomDataService dataService

<style>
    body,
    html,
    app {
        height: 100%;
    }

    app {
        overflow: auto;
    }

    .content {
        height: calc(100% - 70px);
    }

    /* This is the CSS used in the demo */
    @@media only screen and (max-width: 700px) {
        smart-grid {
            width: 100%;
        }
    }
</style>
<Example Name="Grid">
    <h1>Grid Cells Editing Events</h1>
    <p>
        Click on any cell to begin edit its value. To confirm the changes, press 'Enter' or click on another cell or outside the Grid. To cancel the changes, press 'Escape'.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid @ref="grid" OnBeginEdit="BeginEditHandler" OnEndEdit="EndEditHandler" DataSource="dataRecords" Editing="@editing">
            <Columns>
                <Column DataField="FirstName" Label="First Name"></Column>
                <Column DataField="LastName" Label="Last Name"></Column>
                <Column DataField="ProductName" Label="Product"></Column>
                <Column DataField="Expired" Label="Expired" DataType="boolean" Template="@checkBoxEditor" Editor="@checkBoxEditor"></Column>
                <Column DataField="Quantity" Label="Quantity" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"></Column>
                <Column DataField="Price" Label="Unit Price" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2"></Column>
            </Columns>
        </Grid>
    }
</Example>

@code {
    private string checkBoxEditor = "checkBox";
    private string numberInputEditor = "numberInput";
    Grid grid;

    GridEditing editing = new GridEditing()
    {
        Enabled = true,
        Mode = GridEditingMode.Cell
    };

    private List<DataRecord> dataRecords;

    async void EndEditHandler(Event args)
    {
        GridEndEditEventDetail detail = args["Detail"] as GridEndEditEventDetail;

        long rowId = detail.Row;
        string dataField = detail.Column;
        object value = await grid.GetCellValue(rowId, dataField);

        Console.WriteLine(value);
    }

    void BeginEditHandler(Event args)
    {
        GridBeginEditEventDetail detail = args["Detail"] as GridBeginEditEventDetail;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateData(1000);
    }
}

Hope this helps.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/